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
    • Vanila Javascript
    • Angular
    • React
    • Vue
    • Svelte
  • Functions
    • GetFile
    • GetFiles
    • GetFileAsString
    • GetFilesAsString
    • UploadFilesTo
  • Model
    • FilePickerOptions
    • FileStringResult
  • Changelog
  • FAQs

Install

1npm install easy-file-picker

Usage

Example on how to upload a file in various javascript frameworks:

Vanila Javascript

HTML:

1<button id="uploader">Upload!</button>

Javascript/TypeScript:

1import { getFile, uploadFilesTo } from 'easy-file-picker';
2
3document.querySelector("#uploader").addEventListener("click", () => getFile().then((file) => { if(file) uploadFilesTo("http://example.com", file)}));

Angular

HTML:

1<button (click)="uploadFile()">Upload!</button>

TypeScript:

1import { getFile, uploadFilesTo } from 'easy-file-picker';
2
3async uploadFile(): Promise<void> {
4  const file = await getFile();
5  if(file) {
6    await uploadFilesTo("http://example.com", file);
7  }
8}

React

Javascript:

1import { getFile, uploadFilesTo } from 'easy-file-picker';
2
3async uploadFile() {
4  const file = await getFile();
5  if(file) {
6    await uploadFilesTo("http://example.com", file);
7  }
8}
9
10render() {
11  return <button onClick={uploadFile}>Upload!</button>;
12}

Vue

HTML:

1<button @click="uploadFile">Upload!</button>

Javascript:

1import { getFile, uploadFilesTo } from 'easy-file-picker';
2
3methods: {
4  async uploadFile() {
5    const file = await getFile();
6    if(file) {
7      await uploadFilesTo("http://example.com", file);
8    }  
9  }
10}

Svelte

Svelte:

1<script>
2import { getFile, uploadFilesTo } from 'easy-file-picker';
3
4async function uploadFile() {
5  const file = await getFile();
6  if(file) {
7    await uploadFilesTo("http://example.com", file);
8  } 
9}
10</script>
11
12<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.

1function getFile(options?: FilePickerOptions): Promise<File | null>

GetFiles

Shows a system file dialog where the user can select multiple files and returns them. Returns empty array if no file is selected.

1function 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.

1function getFileAsString(options?: FilePickerOptions): Promise<FileStringResult | null>

GetFilesAsString

Shows a system file dialog where the user can select multple files and returns string representations of the selected files content. Returns empty array if no file is selected.

1function getFilesAsString(options?: FilePickerOptions): Promise<FileStringResult[]>

UploadFilesTo

Makes a HTTP request to the indicated url with the files as the body (content-type: form data).

1function uploadFilesTo(url: string, files: File | File[], httpMethod: 'POST' | 'PUT' = 'POST'): 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 millisecond since the UNIX epoch.
webkitRelativePath	string	YES	undefined	The path the URL of the file is relative to.
content	string	YES	undefined	The string representation of the file's content

Changelog

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. (⌐■_■)