Resumable Uploads

1
const tus = require('tus-js-client')
2
3
const projectId = ''
4
5
async function uploadFile(bucketName, fileName, file) {
6
    const { data: { session } } = await supabase.auth.getSession()
7
8
    return new Promise((resolve, reject) => {
9
        var upload = new tus.Upload(file, {
10
            // Supabase TUS endpoint (with direct storage hostname)
11
            endpoint: `https://${projectId}.storage.supabase.co/storage/v1/upload/resumable`,
12
            retryDelays: [0, 3000, 5000, 10000, 20000],
13
            headers: {
14
                authorization: `Bearer ${session.access_token}`,
15
                'x-upsert': 'true', // optionally set upsert to true to overwrite existing files
16
            },
17
            uploadDataDuringCreation: true,
18
            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
19
            metadata: {
20
                bucketName: bucketName,
21
                objectName: fileName,
22
                contentType: 'image/png',
23
                cacheControl: '3600',
24
                metadata: JSON.stringify({ // custom metadata passed to the user_metadata column
25
                   yourCustomMetadata: true,
26
                }),
27
            },
28
            chunkSize: 6 * 1024 * 1024, // NOTE: it must be set to 6MB (for now) do not change it
29
            onError: function (error) {
30
                console.log('Failed because: ' + error)
31
                reject(error)
32
            },
33
            onProgress: function (bytesUploaded, bytesTotal) {
34
                var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2)
35
                console.log(bytesUploaded, bytesTotal, percentage + '%')
36
            },
37
            onSuccess: function () {
38
                console.log('Download %s from %s', upload.file.name, upload.url)
39
                resolve()
40
            },
41
        })
42
43
44
        // Check if there are any previous uploads to continue.
45
        return upload.findPreviousUploads().then(function (previousUploads) {
46
            // Found previous uploads so we select the first one.
47
            if (previousUploads.length) {
48
                upload.resumeFromPreviousUpload(previousUploads[0])
49
            }
50
51
            // Start the upload
52
            upload.start()
53
        })
54
    })
55
}

1
import { useEffect, useState } from "react";
2
import { createClient } from "@supabase/supabase-js";
3
import Uppy from "@uppy/core";
4
import Tus from "@uppy/tus";
5
import Dashboard from "@uppy/dashboard";
6
import "@uppy/core/dist/style.min.css";
7
import "@uppy/dashboard/dist/style.min.css";
8
9
function App() {
10
    // Initialize Uppy instance with the 'sample' bucket specified for uploads
11
    const uppy = useUppyWithSupabase({ bucketName: "sample" });
12
13
    useEffect(() => {
14
        // Set up Uppy Dashboard to display as an inline component within a specified target
15
        uppy.use(Dashboard, {
16
            inline: true, // Ensures the dashboard is rendered inline
17
            target: "#drag-drop-area", // HTML element where the dashboard renders
18
            showProgressDetails: true, // Show progress details for file uploads
19
        });
20
    }, []);
21
22
    return (
23
        <div id="drag-drop-area">
24
        </div>
25
        {/* Target element for the Uppy Dashboard */}
26
    );
27
}
28
29
export default App;
30
31
/**
32
 * Custom hook for configuring Uppy with Supabase authentication and TUS resumable uploads
33
 * @param {Object} options - Configuration options for the Uppy instance.
34
 * @param {string} options.bucketName - The bucket name in Supabase where files are stored.
35
 * @returns {Object} uppy - Uppy instance with configured upload settings.
36
 */
37
export const useUppyWithSupabase = ({ bucketName }: { bucketName: string }) => {
38
    // Initialize Uppy instance only once
39
    const [uppy] = useState(() => new Uppy());
40
    // Initialize Supabase client with project URL and publishable key
41
    const supabase = createClient(`https://${projectId}.supabase.co`, publishableKey);
42
43
    useEffect(() => {
44
        const initializeUppy = async () => {
45
        // Retrieve the current user's session for authentication
46
        const {
47
            data: { session },
48
        } = await supabase.auth.getSession();
49
50
        uppy.use(Tus, {
51
                // Supabase TUS endpoint (with direct storage hostname)
52
                endpoint: `https://${projectId}.storage.supabase.co/storage/v1/upload/resumable`,
53
                retryDelays: [0, 3000, 5000, 10000, 20000], // Retry delays for resumable uploads
54
                headers: {
55
                    authorization: `Bearer ${session?.access_token}`, // User session access token
56
                    apikey: anonKey, // API key for Supabase
57
                },
58
                uploadDataDuringCreation: true, // Send metadata with file chunks
59
                removeFingerprintOnSuccess: true, // Remove fingerprint after successful upload
60
                chunkSize: 6 * 1024 * 1024, // Chunk size for TUS uploads (6MB)
61
                allowedMetaFields: [
62
                    "bucketName",
63
                    "objectName",
64
                    "contentType",
65
                    "cacheControl",
66
                    "metadata",
67
                ], // Metadata fields allowed for the upload
68
                onError: (error) => console.error("Upload error:", error), // Error handling for uploads
69
            }).on("file-added", (file) => {
70
                // Attach metadata to each file, including bucket name and content type
71
                file.meta = {
72
                    ...file.meta,
73
                    bucketName, // Bucket specified by the user of the hook
74
                    objectName: file.name, // Use file name as object name
75
                    contentType: file.type, // Set content type based on file MIME type
76
                    metadata: JSON.stringify({ // custom metadata passed to the user_metadata column
77
                        yourCustomMetadata: true,
78
                    }),
79
                };
80
            });
81
        };
82
83
        // Initialize Uppy with Supabase settings
84
        initializeUppy();
85
    }, [uppy, bucketName]);
86
87
    // Return the configured Uppy instance
88
    return uppy;
89
};

1
suspend fun uploadFile(file: File) {
2
    val upload: ResumableUpload = supabase.storage.from("bucket_name")
3
        .resumable.createOrContinueUpload("file_path", file)
4
    upload.stateFlow
5
        .onEach {
6
            println(it.progress)
7
        }
8
        .launchIn(yourCoroutineScope)
9
    upload.startOrResumeUploading()
10
}
11
12
// On other platforms you might have to give the bytes directly and specify a source if you want to continue it later:
13
suspend fun uploadData(bytes: ByteArray) {
14
    val upload: ResumableUpload = supabase.storage.from("bucket_name")
15
        .resumable.createOrContinueUpload(bytes, "source", "file_path")
16
17
    upload.stateFlow
18
        .onEach {
19
            println(it.progress)
20
        }
21
        .launchIn(yourCoroutineScope)
22
    upload.startOrResumeUploading()
23
}

1
from io import BufferedReader
2
from tusclient import client
3
from supabase import create_client
4
5
def upload_file(
6
    bucket_name: str, file_name: str, file: BufferedReader, access_token: str
7
):
8
    # create Tus client
9
    my_client = client.TusClient(
10
        f"{supabase_url}/storage/v1/upload/resumable",
11
        headers={"Authorization": f"Bearer {access_token}", "x-upsert": "true"},
12
    )
13
    uploader = my_client.uploader(
14
        file_stream=file,
15
        chunk_size=(6 * 1024 * 1024),
16
        metadata={
17
            "bucketName": bucket_name,
18
            "objectName": file_name,
19
            "contentType": "image/png",
20
            "cacheControl": "3600",
21
        },
22
    )
23
    uploader.upload()
24
25
# create client and sign in
26
supabase = create_client(supabase_url, supabase_key)
27
28
# retrieve the current user's session for authentication
29
session = supabase.auth.get_session()
30
31
# open file and send file stream to upload
32
with open("./assets/40mb.jpg", "rb") as fs:
33
    upload_file(
34
        bucket_name="assets",
35
        file_name="large_file",
36
        file=fs,
37
        access_token=session.access_token,
38
    )

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

1
// Create a signed upload URL
2
const { data } = await supabase.storage.from('bucket_name').createSignedUploadUrl('file_path', {
3
  upsert: true, // Optional: allow overwriting existing files
4
})
5
6
// Use the signed URL token in resumable upload headers
7
// Include data.token in the x-signature header

1
# Create a signed upload URL with upsert option
2
response = supabase.storage.from_('bucket_name').create_signed_upload_url(
3
    'file_path',
4
    options={'upsert': 'true'}  # Optional: allow overwriting existing files
5
)
6
7
# Use the signed URL token in resumable upload headers
8
# Include response.token in the x-signature header

1
// Create a signed upload URL
2
var signedUrl = await supabase.Storage.From("bucket_name").CreateUploadSignedUrl("file_path");
3
4
// Use the signed URL token in resumable upload headers
5
// Include signedUrl.Token in the x-signature header