Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danisss9/easy-file-picker
Easy File Picker is a straightforward library with no dependencies to upload/pick/read files in the browser.
https://github.com/danisss9/easy-file-picker
angular file-upload javascript no-dependencies react svelte typescript vue
Last synced: 29 days ago
JSON representation
Easy File Picker is a straightforward library with no dependencies to upload/pick/read files in the browser.
- Host: GitHub
- URL: https://github.com/danisss9/easy-file-picker
- Owner: danisss9
- License: mit
- Created: 2022-11-14T11:12:31.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T22:12:46.000Z (12 months ago)
- Last Synced: 2024-04-24T15:19:39.528Z (9 months ago)
- Topics: angular, file-upload, javascript, no-dependencies, react, svelte, typescript, vue
- Language: TypeScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#easy-file-picker)
- [Table of Contents](#table-of-contents)
- [Install](#install)
- [Usage](#usage)
- [Vanila Javascript](#vanila-javascript)
- [Angular](#angular)
- [React](#react)
- [Vue](#vue)
- [Svelte](#svelte)
- [Functions](#functions)
- [GetFile](#getfile)
- [GetFiles](#getfiles)
- [GetFileAsString](#getfileasstring)
- [GetFilesAsString](#getfilesasstring)
- [UploadFilesTo](#uploadfilesto)
- [Model](#model)
- [FilePickerOptions](#filepickeroptions)
- [FileStringResult](#filestringresult)
- [Changelog](#changelog)
- [FAQs](#faqs)
## Install
```cmd
npm install easy-file-picker
```
## Usage
Example on how to upload a file in various javascript frameworks:
### Vanila Javascript
HTML:
```html
Upload!
```
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)}));
```
### Angular
HTML:
```html
Upload!
```
TypeScript:
```js
import { getFile, uploadFilesTo } from 'easy-file-picker';
async uploadFile(): Promise {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
```
### React
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 Upload!;
}
```
### Vue
HTML:
```html
Upload!
```
Javascript:
```js
import { getFile, uploadFilesTo } from 'easy-file-picker';
methods: {
async uploadFile() {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
}
```
### Svelte
Svelte:
```html
import { getFile, uploadFilesTo } from 'easy-file-picker';
async function uploadFile() {
const file = await getFile();
if(file) {
await uploadFilesTo("http://example.com", file);
}
}
Upload!
```
## 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.
```js
function getFile(options?: FilePickerOptions): Promise
```
### GetFiles
Shows a system file dialog where the user can select multiple files and returns them. Returns empty array if no file is selected.
```js
function getFiles(options?: FilePickerOptions): Promise
```
### 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.
```js
function getFileAsString(options?: FilePickerOptions): Promise
```
### 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.
```js
function getFilesAsString(options?: FilePickerOptions): Promise
```
### UploadFilesTo
Makes a HTTP request to the indicated url with the files as the body (content-type: form data).
```js
function uploadFilesTo(url: string, files: File | File[], httpMethod: 'POST' | 'PUT' = 'POST'): Promise
```
## Model
### FilePickerOptions
| Name | Type | Required | Default | Description |
| :--------------: | :--------: | :------: | :-----: | :--------------------- |
|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. |
### 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 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. (⌐■_■)