Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zackify/use-upload
Framework agnostic library handling file uploads with progress, direct to AWS / GCP, and other locations
https://github.com/zackify/use-upload
file-upload hooks react react-hook svelte xhr
Last synced: 2 months ago
JSON representation
Framework agnostic library handling file uploads with progress, direct to AWS / GCP, and other locations
- Host: GitHub
- URL: https://github.com/zackify/use-upload
- Owner: zackify
- Created: 2019-05-28T03:32:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-10T14:47:56.000Z (over 3 years ago)
- Last Synced: 2024-10-11T13:15:13.611Z (3 months ago)
- Topics: file-upload, hooks, react, react-hook, svelte, xhr
- Language: TypeScript
- Homepage:
- Size: 491 KB
- Stars: 77
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Zero dependency, total control, file upload hook for React and Svelte with upload progress.**
100% Test Coverage across React + Svelte
This is a simple hook for handling file uploads across multiple frameworks. It takes the simplest approach possible so that you have full control over the upload process, while still providing lots of help vs implementing this yourself.
It has upload progress due to using XHR, and can be used for uploading files direct to Google Cloud, AWS, etc.
### Install
```js
npm install @zach.codes/use-upload
```
## Framework Agnostic
This library supports the same api across frameworks. Currently only svelte and React have implementations.
## Svelte
```svelte
import { useUpload } from "@zach.codes/use-upload/lib/svelte";
let [upload, state] = useUpload(({ files }) => ({
method: "PUT",
url: "http://localhost:5000",
body: files[0],
}));
{#if $state.done}
Done uploading!
{/if}
{#if $state.error}
Error uploading: {$state.error}
{/if}
{#if $state.loading}
{$state.progress}% complete
{/if}
{
if (e.currentTarget.files) upload({ files: e.currentTarget.files });
}}
/>
```
### React
Here's a basic example of uploading a single file to a url in React. The below examples all work in Svelte as well.
```tsx
import { useUpload } from "@zach.codes/use-upload/lib/react";
const MyComponent = () => {
let [upload, { progress, done, loading }] = useUpload(({ files }) => ({
method: "PUT",
url: "http://localhost:4000",
body: files[0],
}));
return (
{loading ? `${progress}% complete` : null}
{
if (e.target.files) {
upload({ files: e.target.files });
}
}}
/>
);
};
```
#### Formdata
It's up to you to pass in formdata
```tsx
import { useUpload } from "@zach.codes/use-upload/lib/react";
const MyComponent = () => {
let [upload, { progress, done, loading }] = useUpload(({ files }) => {
let formData = new FormData();
files.forEach((file) => formData.append(file.name, file));
return {
method: "PUT",
url: "http://localhost:4000",
body: formData,
};
});
return (
{loading ? `${progress}% complete` : null}
{
if (e.target.files) {
upload({ files: e.target.files });
}
}}
/>
);
};
```
#### Adding headers
You can pass a custom headers object
```tsx
import { useUpload } from "@zach.codes/use-upload/lib/react";
const MyComponent = () => {
let [upload, { progress, done, loading }] = useUpload(({ files }) => {
let formData = new FormData();
files.forEach((file) => formData.append(file.name, file));
return {
method: "PUT",
url: "http://localhost:4000",
body: formData,
headers: { Authorization: "test" },
};
});
return (
{loading ? `${progress}% complete` : null}
{
if (e.target.files) {
upload({ files: e.target.files });
}
}}
/>
);
};
```
#### Customizing the request
You have full access to the XHR object, so you can set withCredentials or anything else you'd like.
```tsx
import { useUpload } from "@zach.codes/use-upload/lib/react";
const MyComponent = () => {
let [upload, { progress, done, loading }] = useUpload(({ files, xhr }) => {
xhr.withCredentials = true;
let formData = new FormData();
files.forEach((file) => formData.append(file.name, file));
return {
method: "PUT",
url: "http://localhost:4000",
body: formData,
headers: { Authorization: "test" },
};
});
return (
{loading ? `${progress}% complete` : null}
{
if (e.target.files) {
upload({ files: e.target.files });
}
}}
/>
);
};
```
#### Signed uploads
Signed uploads to a storage bucket on AWS or similar service, usually require this flow:
- Hit your own backend to generate a signed url
- send the file to that signed url to upload direct
- do something on your frontend after it finishes
Here's how simple it is with this hook
```tsx
import { useUpload } from "@zach.codes/use-upload/lib/react";
const MyComponent = () => {
let [upload, { progress, done, loading }] = useUpload(async ({ files }) => {
// This function is your request logic for getting a url
let url = await getUploadUrl({
caseId,
fileName: files[0].name,
contentType: files[0].type,
});
// returning undefined skips the upload logic, in case your `getUploadUrl` has an error
if (!url) return;
return {
method: "PUT",
url: url,
// send a single file in the body to the storage bucket
body: files[0],
};
});
useEffect(() => {
if (done) {
//refetch the data on the page, or some other action so the user can see the upload completed
}
}, [done, refetch]);
return (
{loading ? `${progress}% complete` : null}
{
if (e.target.files) {
upload({ files: e.target.files });
}
}}
/>
);
};
```