Easy File Picker

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.

Table of Contents

• Easy File Picker
  • Table of Contents
  • Install
  • Usage
    • Vanilla JavaScript
    • Angular
    • React
    • Vue
    • Svelte
  • Functions
    • GetFile
    • GetFiles
    • GetFileAsString
    • GetFilesAsString
    • UploadFilesTo
  • Model
    • FilePickerOptions
    • FileStringResult
  • Error and Cancellation Handling
  • Changelog
  • FAQs

Install

npm install easy-file-picker

Usage

Examples of how to upload a file in various JavaScript frameworks:

Vanilla JavaScript

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)}));

Angular

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);
  }
}

React

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>;
}

Vue

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

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>

Functions

GetFile

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>

GetFiles

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[]>

GetFileAsString

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>

GetFilesAsString

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[]>

UploadFilesTo

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>

Model

FilePickerOptions

Name	Type	Required	Default	Description
acceptedExtensions	string[]	NO	""	An array of unique file type specifiers, describing which file types to allow.

FileStringResult

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
• fixed FileReader race condition when reading multiple files as strings
• improved error handling for file reading operations

---

Version 1.1:

• now handles when the user does not select a file
• now handles input errors
• updated examples and documentation
• updated TypeScript version

---

Version 1.0.4:

• added example for Svelte
• updated TypeScript version

---

Version 1.0.3:

• added git repository
• added FileStringResult type

---

Version 1.0.2:

• added example for VueJS

---

Version 1.0.1:

• fixed typo in documentation

---

Version 1.0:

• published library

FAQs

No FAQs for now. (⌐■_■)