Resumable Uploads

const tus = require('tus-js-client')

const projectId = ''

async function uploadFile(bucketName, fileName, file) {
    const { data: { session } } = await supabase.auth.getSession()

    return new Promise((resolve, reject) => {
        var upload = new tus.Upload(file, {
            // Supabase TUS endpoint (with direct storage hostname)
            endpoint: `https://${projectId}.storage.supabase.co/storage/v1/upload/resumable`,
            retryDelays: [0, 3000, 5000, 10000, 20000],
            headers: {
                authorization: `Bearer ${session.access_token}`,
                'x-upsert': 'true', // optionally set upsert to true to overwrite existing files
            },
            uploadDataDuringCreation: true,
            removeFingerprintOnSuccess: true, // Important if you want to allow re-uploading the same file https://github.com/tus/tus-js-client/blob/main/docs/api.md#removefingerprintonsuccess
            metadata: {
                bucketName: bucketName,
                objectName: fileName,
                contentType: 'image/png',
                cacheControl: '3600',
                metadata: JSON.stringify({ // custom metadata passed to the user_metadata column
                   yourCustomMetadata: true,
                }),
            },
            chunkSize: 6 * 1024 * 1024, // NOTE: it must be set to 6MB (for now) do not change it
            onError: function (error) {
                console.log('Failed because: ' + error)
                reject(error)
            },
            onProgress: function (bytesUploaded, bytesTotal) {
                var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2)
                console.log(bytesUploaded, bytesTotal, percentage + '%')
            },
            onSuccess: function () {
                console.log('Download %s from %s', upload.file.name, upload.url)
                resolve()
            },
        })


        // Check if there are any previous uploads to continue.
        return upload.findPreviousUploads().then(function (previousUploads) {
            // Found previous uploads so we select the first one.
            if (previousUploads.length) {
                upload.resumeFromPreviousUpload(previousUploads[0])
            }

            // Start the upload
            upload.start()
        })
    })
}

import { useEffect, useState } from "react";
import { createClient } from "@supabase/supabase-js";
import Uppy from "@uppy/core";
import Tus from "@uppy/tus";
import Dashboard from "@uppy/dashboard";
import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";

function App() {
    // Initialize Uppy instance with the 'sample' bucket specified for uploads
    const uppy = useUppyWithSupabase({ bucketName: "sample" });

    useEffect(() => {
        // Set up Uppy Dashboard to display as an inline component within a specified target
        uppy.use(Dashboard, {
            inline: true, // Ensures the dashboard is rendered inline
            target: "#drag-drop-area", // HTML element where the dashboard renders
            showProgressDetails: true, // Show progress details for file uploads
        });
    }, []);

    return (
        <div id="drag-drop-area">
        </div>
        {/* Target element for the Uppy Dashboard */}
    );
}

export default App;

/**
 * Custom hook for configuring Uppy with Supabase authentication and TUS resumable uploads
 * @param {Object} options - Configuration options for the Uppy instance.
 * @param {string} options.bucketName - The bucket name in Supabase where files are stored.
 * @returns {Object} uppy - Uppy instance with configured upload settings.
 */
export const useUppyWithSupabase = ({ bucketName }: { bucketName: string }) => {
    // Initialize Uppy instance only once
    const [uppy] = useState(() => new Uppy());
    // Initialize Supabase client with project URL and publishable key
    const supabase = createClient(`https://${projectId}.supabase.co`, publishableKey);

    useEffect(() => {
        const initializeUppy = async () => {
        // Retrieve the current user's session for authentication
        const {
            data: { session },
        } = await supabase.auth.getSession();

        uppy.use(Tus, {
                // Supabase TUS endpoint (with direct storage hostname)
                endpoint: `https://${projectId}.storage.supabase.co/storage/v1/upload/resumable`,
                retryDelays: [0, 3000, 5000, 10000, 20000], // Retry delays for resumable uploads
                headers: {
                    authorization: `Bearer ${session?.access_token}`, // User session access token
                    apikey: anonKey, // API key for Supabase
                },
                uploadDataDuringCreation: true, // Send metadata with file chunks
                removeFingerprintOnSuccess: true, // Remove fingerprint after successful upload
                chunkSize: 6 * 1024 * 1024, // Chunk size for TUS uploads (6MB)
                allowedMetaFields: [
                    "bucketName",
                    "objectName",
                    "contentType",
                    "cacheControl",
                    "metadata",
                ], // Metadata fields allowed for the upload
                onError: (error) => console.error("Upload error:", error), // Error handling for uploads
            }).on("file-added", (file) => {
                // Attach metadata to each file, including bucket name and content type
                file.meta = {
                    ...file.meta,
                    bucketName, // Bucket specified by the user of the hook
                    objectName: file.name, // Use file name as object name
                    contentType: file.type, // Set content type based on file MIME type
                    metadata: JSON.stringify({ // custom metadata passed to the user_metadata column
                        yourCustomMetadata: true,
                    }),
                };
            });
        };

        // Initialize Uppy with Supabase settings
        initializeUppy();
    }, [uppy, bucketName]);

    // Return the configured Uppy instance
    return uppy;
};

suspend fun uploadFile(file: File) {
    val upload: ResumableUpload = supabase.storage.from("bucket_name")
        .resumable.createOrContinueUpload("file_path", file)
    upload.stateFlow
        .onEach {
            println(it.progress)
        }
        .launchIn(yourCoroutineScope)
    upload.startOrResumeUploading()
}

// On other platforms you might have to give the bytes directly and specify a source if you want to continue it later:
suspend fun uploadData(bytes: ByteArray) {
    val upload: ResumableUpload = supabase.storage.from("bucket_name")
        .resumable.createOrContinueUpload(bytes, "source", "file_path")

    upload.stateFlow
        .onEach {
            println(it.progress)
        }
        .launchIn(yourCoroutineScope)
    upload.startOrResumeUploading()
}

from io import BufferedReader
from tusclient import client
from supabase import create_client

def upload_file(
    bucket_name: str, file_name: str, file: BufferedReader, access_token: str
):
    # create Tus client
    my_client = client.TusClient(
        f"{supabase_url}/storage/v1/upload/resumable",
        headers={"Authorization": f"Bearer {access_token}", "x-upsert": "true"},
    )
    uploader = my_client.uploader(
        file_stream=file,
        chunk_size=(6 * 1024 * 1024),
        metadata={
            "bucketName": bucket_name,
            "objectName": file_name,
            "contentType": "image/png",
            "cacheControl": "3600",
        },
    )
    uploader.upload()

# create client and sign in
supabase = create_client(supabase_url, supabase_key)

# retrieve the current user's session for authentication
session = supabase.auth.get_session()

# open file and send file stream to upload
with open("./assets/40mb.jpg", "rb") as fs:
    upload_file(
        bucket_name="assets",
        file_name="large_file",
        file=fs,
        access_token=session.access_token,
    )

await supabase.Storage.From("bucket_name")
  .UploadOrResume("local_file_path", "file_path", new FileOptions { Upsert = true });

// Create a signed upload URL
const { data } = await supabase.storage.from('bucket_name').createSignedUploadUrl('file_path', {
  upsert: true, // Optional: allow overwriting existing files
})

// Use the signed URL token in resumable upload headers
// Include data.token in the x-signature header

# Create a signed upload URL with upsert option
response = supabase.storage.from_('bucket_name').create_signed_upload_url(
    'file_path',
    options={'upsert': 'true'}  # Optional: allow overwriting existing files
)

# Use the signed URL token in resumable upload headers
# Include response.token in the x-signature header

// Create a signed upload URL
var signedUrl = await supabase.Storage.From("bucket_name").CreateUploadSignedUrl("file_path");

// Use the signed URL token in resumable upload headers
// Include signedUrl.Token in the x-signature header