Skip to content

Instantly share code, notes, and snippets.

@jstoone
Created October 4, 2023 08:38
Show Gist options
  • Save jstoone/76ff5b9ab2346174652d119e1b780751 to your computer and use it in GitHub Desktop.
Save jstoone/76ff5b9ab2346174652d119e1b780751 to your computer and use it in GitHub Desktop.
Supabase: Resumable upload with Uppy
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} />
</>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment