Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mat-sz/upload
⬆ Isomorphic TypeScript file upload library.
https://github.com/mat-sz/upload
fetch fetch-api form javascript javascript-library promise typescript typescript-library upload upload-file
Last synced: about 1 month ago
JSON representation
⬆ Isomorphic TypeScript file upload library.
- Host: GitHub
- URL: https://github.com/mat-sz/upload
- Owner: mat-sz
- License: bsd-3-clause-clear
- Created: 2020-06-03T16:45:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-30T22:16:05.000Z (6 months ago)
- Last Synced: 2024-12-27T04:07:08.055Z (about 1 month ago)
- Topics: fetch, fetch-api, form, javascript, javascript-library, promise, typescript, typescript-library, upload, upload-file
- Language: TypeScript
- Homepage:
- Size: 177 KB
- Stars: 20
- Watchers: 3
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Isomorphic TypeScript file upload library for browser and node.js environments.
)
Quickstart:
```
npm install upload
# ...or
yarn add upload
```
## Example usage
### upload function
```ts
import { upload } from 'upload';
async function test() {
const response = await upload(
'https://example.com/upload',
{
file: someInput.file,
},
{
onProgress: progress => (element.innerText = progress * 100 + '%'),
}
);
console.log(response);
}
```
### Upload class
```ts
async function test() {
const upload = new Upload({
url: 'https://example.com/upload',
form: {
file: someInput.file,
},
headers: {
Authorization: 'Bearer TOKEN',
},
});
upload.on('progress', progress => {
element.innerText = progress * 100 + '%';
});
const response = await upload.upload();
console.log(response);
alert('Done!');
}
```
### Abort request
```ts
const upload = new Upload({
url: 'https://httpbin.org/post',
form: someInput.file,
});
upload.on('state', () => {
if (upload.state === 'aborted') doSomething();
});
upload.upload();
upload.abort();
```
## Events
You can attach event listeners to an instance of `Upload` with `.on`:
```ts
upload.on('state', state => {
console.log(state);
});
```
### state
Emitted when upload state is changed. Possible states: `new`, `started`, `aborted`, `failed`, `successful`.
### error
Emitted when an error occurs.
### progress (progress: number)
Emitted when upload progress changes. Progress is a float between 0 and 1.
## API
```ts
interface UploadResponse {
data?: string | ArrayBuffer | Blob;
headers?: Record;
}
interface UploadOptions {
form: Record | FormData | FormDataNode;
url: string;
headers?: Record;
}
type UploadState = 'new' | 'started' | 'aborted' | 'failed' | 'successful';
public state: UploadState;
public progress = 0;
public uploadedBytes = 0;
public totalBytes = 0;
new Upload(options: UploadOptions);
upload(): Promise;
abort(): void;
on(eventType: 'progress', listener: (progress: number) => void): void;
on(eventType: 'error', listener: () => void): void;
on(eventType: 'state', listener: (state: string) => void): void;
off(eventType: 'progress', listener: (progress: number) => void): void;
off(eventType: 'error', listener: () => void): void;
off(eventType: 'state', listener: (state: string) => void): void;
```