Easy File Picker is a straightforward library with no dependencies to upload/pick/read files in the browser that can be used with any frontend framework.
npm install easy-file-picker
Examples of how to upload a file in various JavaScript frameworks:
HTML:
<button id="uploader">Upload!</button>
JavaScript/TypeScript:
import { getFile, uploadFilesTo } from 'easy-file-picker';
document.querySelector("#uploader").addEventListener("click", () => getFile().then((file) => { if(file) uploadFilesTo("http://example.com", file)}));
HTML:
<button (click)="uploadFile()">Upload!</button>
TypeScript:
import { getFile, uploadFilesTo } from 'easy-file-picker';
async uploadFile(): Promise<void> {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
JavaScript:
import { getFile, uploadFilesTo } from 'easy-file-picker';
async uploadFile() {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
render() {
return <button onClick={uploadFile}>Upload!</button>;
}
HTML:
<button @click="uploadFile">Upload!</button>
JavaScript:
import { getFile, uploadFilesTo } from 'easy-file-picker';
methods: {
async uploadFile() {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
}
Svelte:
<script>
import { getFile, uploadFilesTo } from 'easy-file-picker';
async function uploadFile() {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
</script>
<button on:click={uploadFile}>Upload!</button>
Shows a system file dialog where the user can select a single file and returns it. Returns null
if no file is selected.
function getFile(options?: FilePickerOptions): Promise<File | null>
Shows a system file dialog where the user can select multiple files and returns them. Returns an empty array if no file is selected.
function getFiles(options?: FilePickerOptions): Promise<File[]>
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.
function getFileAsString(options?: FilePickerOptions): Promise<FileStringResult | null>
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.
function getFilesAsString(options?: FilePickerOptions): Promise<FileStringResult[]>
Makes an HTTP request to the indicated URL with the files as the body (Content-Type: form data).
// Basic usage (single or multiple files)
function uploadFilesTo(url: string, files: File | File[], httpMethod: 'POST' | 'PUT' = 'POST'): Promise<Response>
// With named files (object)
function uploadFilesTo(url: string, files: Record<string, File>, httpMethod: 'POST' | 'PUT' = 'POST'): Promise<Response>
// With custom RequestInit
function uploadFilesTo(url: string, files: File | File[] | Record<string, File>, requestInit: RequestInit): Promise<Response>
Name | Type | Required | Default | Description |
---|---|---|---|---|
acceptedExtensions | string[] | NO | "" | An array of unique file type specifiers, describing which file types to allow. |
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 |
All file picker functions handle cancellation and errors:
null
(for a single file) or an empty array (for multiple files).Version 1.2:
uploadTo
methodgetFilesAsString
where multiple file selection was disabledVersion 1.1:
Version 1.0.4:
Version 1.0.3:
Version 1.0.2:
Version 1.0.1:
Version 1.0:
No FAQs for now. (⌐■_■)