Easy File Picker is a straightforward library with no dependencies to upload/pick/read files in the browser.
npm install easy-file-pickercmd
npm install easy-file-picker
`
Usage
Examples of how to upload a file in various JavaScript frameworks:
$3
HTML:
`html
`
JavaScript/TypeScript:
`js
import { getFile, uploadFilesTo } from 'easy-file-picker';
document.querySelector("#uploader").addEventListener("click", () => getFile().then((file) => { if(file) uploadFilesTo("http://example.com", file)}));
`
$3
HTML:
`html
`
TypeScript:
`js
import { getFile, uploadFilesTo } from 'easy-file-picker';
async uploadFile(): Promise {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
`
$3
JavaScript:
`jsx
import { getFile, uploadFilesTo } from 'easy-file-picker';
async uploadFile() {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
render() {
return ;
}
`
$3
HTML:
`html
`
JavaScript:
`js
import { getFile, uploadFilesTo } from 'easy-file-picker';
methods: {
async uploadFile() {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
}
`
$3
Svelte:
`html
`
Functions
$3
Shows a system file dialog where the user can select a single file and returns it. Returns null if no file is selected.
`js
function getFile(options?: FilePickerOptions): Promise
`
$3
Shows a system file dialog where the user can select multiple files and returns them. Returns an empty array if no file is selected.
`js
function getFiles(options?: FilePickerOptions): Promise
`
$3
Shows a system file dialog where the user can select a single file and returns a string representation of the file content. Returns null if no file is selected.
`js
function getFileAsString(options?: FilePickerOptions): Promise
`
$3
Shows a system file dialog where the user can select multiple files and returns string representations of the selected files' content. Returns an empty array if no file is selected.
`js
function getFilesAsString(options?: FilePickerOptions): Promise
`
$3
Makes an HTTP request to the indicated URL with the files as the body (Content-Type: form data).
`js
// Basic usage (single or multiple files)
function uploadFilesTo(url: string, files: File | File[], httpMethod: 'POST' | 'PUT' = 'POST'): Promise
// With named files (object)
function uploadFilesTo(url: string, files: Record, httpMethod: 'POST' | 'PUT' = 'POST'): Promise
// With custom RequestInit
function uploadFilesTo(url: string, files: File | File[] | Record, requestInit: RequestInit): Promise
`
Model
$3
| Name | Type | Required | Default | Description |
| :--------------: | :--------: | :------: | :-----: | :--------------------- |
|acceptedExtensions| string[] | NO | "" | An array of unique file type specifiers, describing which file types to allow. |
$3
| Name | Type | Required | Default | Description |
| :--------------: | :--------: | :------: | :-----: | :--------------------- |
| name | string | YES | undefined | The name of the file. |
| size | number | YES | undefined | The size of the file in bytes. |
| type | string | YES | undefined | The MIME type of the file. |
| lastModified | number | YES | undefined | The last modified time of the file, in milliseconds since the UNIX epoch. |
|webkitRelativePath| string | YES | undefined | The path to which the file's URL is relative. |
| content | string | YES | undefined | The string representation of the file's content |
Error and Cancellation Handling
All file picker functions handle cancellation and errors:
- If the user cancels the dialog or no file(s) are selected, the Promise resolves to null (for a single file) or an empty array (for multiple files).
- If an error occurs during file selection or reading, the Promise will reject with the error.
Changelog
Version 1.2:
- added more parameters to uploadTo method
- added rimraf dev dependency to delete files cross platform
- updated TypeScript version
- fixed bug in getFilesAsString` where multiple file selection was disabled