React-hook-multipart NPM

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
    },
  },
});