react-hook-multipart v0.0.56
React Hook Multipart
Not for production yet 🚧 Tests & Type definitions missing
Is a fast and efficient hook for upload big files with multipart streams in a SSR React environment.
👀 It will split the file into multiple parts, upload them in parallel and retry failed parts.
I'm currently working on implementing Web Streams 🚬👷🏼 Al final, creo que no implementaré streams. Lo que estoy haciendo con el slice()
del blob es suficientemente compatible.
Mejor me concentro en el abort signal...
Install it like so:
npm i react-hook-multipart
Create ENV vars
You need to set all these five env variables, either by exporting them or write'em down in your .env file
AWS_REGION = "auto";
AWS_ENDPOINT_URL_S3 = "https://fly.storage.tigris.dev";
BUCKET_NAME = "blissmo-bucket";
AWS_ACCESS_KEY_ID = "Tu access key";
AWS_SECRET_ACCESS_KEY = "Tu secret";
How to use it
Use the handler in your React Router Framework server action
// app/routes/api/experiment.ts
import type { Route } from "./+types/experiment";
import { createAsset } from "~/.server/db";
import { getUserOrRedirect } from "~/.server/getters";
// import the handdler
import { handler } from "react-hook-multipart";
export const action = async ({ request }: Route.ActionArgs) => {
const user = await getUserOrRedirect(request);
// your cb is called only on complete
return await handler(
request,
async ({ metadata, size, key, contentType }) => {
// create on DB
createAsset({
metadata: metadata,
size: size,
storageKey: key,
contentType: contentType,
status: "uploaded",
userId: user.id,
});
return new Response(JSON.stringify({ ok: true }));
}
);
};
Use the hook in your React Component
// any react component
import { useUploadMultipart } from "react-hook-multipart/react";
const { upload } = useUploadMultipart({
onUploadProgress({ percentage }) {
setProgress(percentage); // your own state ✅
},
access: "public-read", // or private
handler: "/api/upload", // your own resource route ㊮
signal: new AbortController(), // @todo about to implement... 👷🏼♂️
});
const handleUpload = async (event) => {
const file = event.currentTarget.files?.[0];
const { key, url } = await upload(file.name, file);
};
You can use try{}catch(){}
blocks to capture any error.
// ...
const [progress, setProgress] = useState(0);
const putFile = async (file: File) => {
await upload(file.name, file, ({ percentage }) => setProgress(percentage));
// ^ you can pass any function to update the progress
};
// ...
You can also pass the progress handler as the third paramether to the upload function.
Important!
You may want to externalize the dependency in vite.config
file.
import { reactRouter } from "@react-router/dev/vite";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
server: { port: 3000 },
css: {
postcss: {
plugins: [tailwindcss, autoprefixer],
},
},
plugins: [reactRouter(), tsconfigPaths()],
build: {
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ["react-hook-multipart"], // <= here
},
},
});
Underneath
This package uses @aws-sdk/s3-request-presigner
and @aws-sdk/client-s3
underneath.
Made with 🚬🫁 by Fixter.org
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago