Supabase: Resumable upload with Uppy

UppyUpload.client.tsx

import Uppy from "@uppy/core";
import { DragDrop, StatusBar } from "@uppy/react";
import Tus from "@uppy/tus";
import { useState } from "react";

// Don't forget the CSS: core and the UI components + plugins you are using.

function createUppy() {
  // Adding to global `meta` will add it to every file.
  // Every Uppy instance needs a unique ID.
  return new Uppy().use(Tus, {
    endpoint: `${window.WINDOW_ENV.SUPABASE_URL}/storage/v1/upload/resumable}`,
    headers: {
      authorization: `Bearer ${window.WINDOW_ENV.SUPABASE_ANON_KEY}`,
      apikey: window.WINDOW_ENV.SUPABASE_ANON_KEY,
    },
    uploadDataDuringCreation: true,
    chunkSize: 6 * 1024 * 1024,
    allowedMetaFields: [
      "bucketName",
      "objectName",
      "contentType",
      "cacheControl",
    ],
  });
}

export const UppyUpload = () => {
  const [uppy] = useState(() => createUppy());

  return (
    <>
      <DragDrop uppy={uppy} />
      <StatusBar uppy={uppy} />
    </>
  );
};