{"id":19098304,"url":"https://github.com/danisss9/easy-file-picker","last_synced_at":"2026-04-10T02:48:22.206Z","repository":{"id":65419968,"uuid":"565805301","full_name":"danisss9/easy-file-picker","owner":"danisss9","description":"Easy File Picker is a straightforward library with no dependencies to upload/pick/read files in the browser.","archived":false,"fork":false,"pushed_at":"2024-02-21T22:12:46.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-24T15:19:39.528Z","etag":null,"topics":["angular","file-upload","javascript","no-dependencies","react","svelte","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danisss9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-14T11:12:31.000Z","updated_at":"2024-01-20T17:00:08.000Z","dependencies_parsed_at":"2024-11-09T03:45:03.596Z","dependency_job_id":"4397ae74-2fdc-4c58-b850-3258e7f64c64","html_url":"https://github.com/danisss9/easy-file-picker","commit_stats":{"total_commits":3,"total_committers":2,"mean_commits":1.5,"dds":"0.33333333333333337","last_synced_commit":"9da9f700e4813825ef5ca9723129abf047b705b3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2Feasy-file-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2Feasy-file-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2Feasy-file-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2Feasy-file-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danisss9","download_url":"https://codeload.github.com/danisss9/easy-file-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240152133,"owners_count":19756029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","file-upload","javascript","no-dependencies","react","svelte","typescript","vue"],"created_at":"2024-11-09T03:45:00.438Z","updated_at":"2026-04-10T02:48:22.199Z","avatar_url":"https://github.com/danisss9.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Easy File Picker\r\n\r\nEasy 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.\r\n\r\n## Table of Contents\r\n\r\n- [Easy File Picker](#easy-file-picker)\r\n  - [Table of Contents](#table-of-contents)\r\n  - [Install](#install)\r\n  - [Usage](#usage)\r\n    - [Vanilla JavaScript](#vanilla-javascript)\r\n    - [Angular](#angular)\r\n    - [React](#react)\r\n    - [Vue](#vue)\r\n    - [Svelte](#svelte)\r\n  - [Functions](#functions)\r\n    - [GetFile](#getfile)\r\n    - [GetFiles](#getfiles)\r\n    - [GetFileAsString](#getfileasstring)\r\n    - [GetFilesAsString](#getfilesasstring)\r\n    - [UploadFilesTo](#uploadfilesto)\r\n  - [Model](#model)\r\n    - [FilePickerOptions](#filepickeroptions)\r\n    - [FileStringResult](#filestringresult)\r\n  - [Error and Cancellation Handling](#error-and-cancellation-handling)\r\n  - [Changelog](#changelog)\r\n  - [FAQs](#faqs)\r\n\r\n## Install\r\n\r\n```cmd\r\nnpm install easy-file-picker\r\n```\r\n\r\n## Usage\r\n\r\nExamples of how to upload a file in various JavaScript frameworks:\r\n\r\n### Vanilla JavaScript\r\n\r\nHTML:\r\n\r\n```html\r\n\u003cbutton id=\"uploader\"\u003eUpload!\u003c/button\u003e\r\n```\r\n\r\nJavaScript/TypeScript:\r\n\r\n```js\r\nimport { getFile, uploadFilesTo } from 'easy-file-picker';\r\n\r\ndocument.querySelector(\"#uploader\").addEventListener(\"click\", () =\u003e getFile().then((file) =\u003e { if(file) uploadFilesTo(\"http://example.com\", file)}));\r\n```\r\n\r\n### Angular\r\n\r\nHTML:\r\n\r\n```html\r\n\u003cbutton (click)=\"uploadFile()\"\u003eUpload!\u003c/button\u003e\r\n```\r\n\r\nTypeScript:\r\n\r\n```js\r\nimport { getFile, uploadFilesTo } from 'easy-file-picker';\r\n\r\nasync uploadFile(): Promise\u003cvoid\u003e {\r\n  const file = await getFile();\r\n  if(file) {\r\n    await uploadFilesTo(\"http://example.com\", file);\r\n  }\r\n}\r\n```\r\n\r\n### React\r\n\r\nJavaScript:\r\n\r\n```jsx\r\nimport { getFile, uploadFilesTo } from 'easy-file-picker';\r\n\r\nasync uploadFile() {\r\n  const file = await getFile();\r\n  if(file) {\r\n    await uploadFilesTo(\"http://example.com\", file);\r\n  }\r\n}\r\n\r\nrender() {\r\n  return \u003cbutton onClick={uploadFile}\u003eUpload!\u003c/button\u003e;\r\n}\r\n```\r\n\r\n### Vue\r\n\r\nHTML:\r\n\r\n```html\r\n\u003cbutton @click=\"uploadFile\"\u003eUpload!\u003c/button\u003e\r\n```\r\n\r\nJavaScript:\r\n\r\n```js\r\nimport { getFile, uploadFilesTo } from 'easy-file-picker';\r\n\r\nmethods: {\r\n  async uploadFile() {\r\n    const file = await getFile();\r\n    if(file) {\r\n      await uploadFilesTo(\"http://example.com\", file);\r\n    }  \r\n  }\r\n}\r\n```\r\n\r\n### Svelte\r\n\r\nSvelte:\r\n\r\n```html\r\n\u003cscript\u003e\r\nimport { getFile, uploadFilesTo } from 'easy-file-picker';\r\n\r\nasync function uploadFile() {\r\n  const file = await getFile();\r\n  if(file) {\r\n    await uploadFilesTo(\"http://example.com\", file);\r\n  } \r\n}\r\n\u003c/script\u003e\r\n\r\n\u003cbutton on:click={uploadFile}\u003eUpload!\u003c/button\u003e\r\n```\r\n\r\n## Functions\r\n\r\n### GetFile\r\n\r\nShows a system file dialog where the user can select a single file and returns it. Returns `null` if no file is selected.\r\n\r\n```js\r\nfunction getFile(options?: FilePickerOptions): Promise\u003cFile | null\u003e\r\n```\r\n\r\n### GetFiles\r\n\r\nShows a system file dialog where the user can select multiple files and returns them. Returns an empty array if no file is selected.\r\n\r\n```js\r\nfunction getFiles(options?: FilePickerOptions): Promise\u003cFile[]\u003e\r\n```\r\n\r\n### GetFileAsString\r\n\r\nShows 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.\r\n\r\n```js\r\nfunction getFileAsString(options?: FilePickerOptions): Promise\u003cFileStringResult | null\u003e\r\n```\r\n\r\n### GetFilesAsString\r\n\r\nShows 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.\r\n\r\n```js\r\nfunction getFilesAsString(options?: FilePickerOptions): Promise\u003cFileStringResult[]\u003e\r\n```\r\n\r\n### UploadFilesTo\r\n\r\nMakes an HTTP request to the indicated URL with the files as the body (Content-Type: form data).\r\n\r\n```js\r\n// Basic usage (single or multiple files)\r\nfunction uploadFilesTo(url: string, files: File | File[], httpMethod: 'POST' | 'PUT' = 'POST'): Promise\u003cResponse\u003e\r\n\r\n// With named files (object)\r\nfunction uploadFilesTo(url: string, files: Record\u003cstring, File\u003e, httpMethod: 'POST' | 'PUT' = 'POST'): Promise\u003cResponse\u003e\r\n\r\n// With custom RequestInit\r\nfunction uploadFilesTo(url: string, files: File | File[] | Record\u003cstring, File\u003e, requestInit: RequestInit): Promise\u003cResponse\u003e\r\n```\r\n\r\n## Model\r\n\r\n### FilePickerOptions\r\n\r\n|       Name       |    Type    | Required | Default |       Description      |\r\n| :--------------: | :--------: | :------: | :-----: | :--------------------- |\r\n|acceptedExtensions|  string[]  |    NO    |    \"\"   | An array of unique [file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers), describing which file types to allow. |\r\n\r\n### FileStringResult\r\n\r\n|       Name       |    Type    | Required | Default |       Description      |\r\n| :--------------: | :--------: | :------: | :-----: | :--------------------- |\r\n| name |  string  |    YES    |    undefined   | The name of the file. |\r\n| size |  number  |    YES    |    undefined   | The size of the file in bytes.  |\r\n| type |  string  |    YES    |    undefined   | The [MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) type of the file. |\r\n| lastModified |  number  |    YES    |    undefined   | The last modified time of the file, in milliseconds since the UNIX epoch. |\r\n|webkitRelativePath|  string  |    YES    |    undefined   | The path to which the file's URL is relative. |\r\n| content |  string  |    YES    |    undefined   | The string representation of the file's content |\r\n\r\n## Error and Cancellation Handling\r\n\r\nAll file picker functions handle cancellation and errors:\r\n\r\n- 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).\r\n- If an error occurs during file selection or reading, the Promise will reject with the error.\r\n\r\n## Changelog\r\n\r\n**Version 1.2:**\r\n\r\n- added more parameters to `uploadTo` method\r\n- added rimraf dev dependency to delete files cross platform\r\n- updated TypeScript version\r\n- fixed bug in `getFilesAsString` where multiple file selection was disabled\r\n- fixed FileReader race condition when reading multiple files as strings\r\n- improved error handling for file reading operations\r\n\r\n---\r\n\r\n**Version 1.1:**\r\n\r\n- now handles when the user does not select a file\r\n- now handles input errors\r\n- updated examples and documentation\r\n- updated TypeScript version\r\n\r\n---\r\n\r\n**Version 1.0.4:**\r\n\r\n- added example for Svelte\r\n- updated TypeScript version\r\n\r\n---\r\n\r\n**Version 1.0.3:**\r\n\r\n- added git repository\r\n- added FileStringResult type\r\n\r\n---\r\n\r\n**Version 1.0.2:**\r\n\r\n- added example for VueJS\r\n\r\n---\r\n\r\n**Version 1.0.1:**\r\n\r\n- fixed typo in documentation\r\n\r\n---\r\n\r\n**Version 1.0:**\r\n\r\n- published library\r\n\r\n## FAQs\r\n\r\nNo FAQs for now. (⌐■_■)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanisss9%2Feasy-file-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanisss9%2Feasy-file-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanisss9%2Feasy-file-picker/lists"}