Supabase Storage Resumable File Uploads Keep Stalling at 6MB

I'm facing a weird issue with file uploads using FilePond and TUS with Supabase Storage. The uploads for files under 6MB work fine, but anything above that gets stuck at a certain percentage. usually around the 6MB chunk percentage of the file.

Here's what I see when I try to upload a larger file (like a 7MB image) through the Supabase CLI Dashboard:

Uploading 1 file... 0s remaining – 84.79%
Do not close the browser until it's completed

Then it just hangs and shows this:

Failed to upload 7MB example.jpg: tus: failed to resume upload, caused by [object ProgressEvent], originated from request (method: HEAD, url: https://127.0.0.1:8443/storage/v1/upload/resumable/RklMRV9VUExPQURfQlVDS0VULzdNQiBleGFtcGxlLmpwZy9jZTI2YzMyOC1mNjU4LTQxYWQtYjdkZS0yZTM2NTBhNzk1OTE, response code: n/a, response text: n/a, request id: n/a)

It fails after trying a few times, so I disabled the built-in chunking in FilePond, thinking it might help, but it’s still happening. I tested the same setup in the CLI Local Dashboard as mentioned, and it fails there too with larger files.

Here’s a snippet of my upload code for context:

<FilePond
    files={field.value}
    oninit={() => setIsFilepondReady(true)}
    onupdatefiles={(fileItems) =>
        field.onChange(fileItems.map((fileItem) => fileItem.file))
    }
    server={{
        process: async (fieldName, file, _metadata, load, error, progress, abort) => {
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const fileName = file.name;
            const uniqueFileName = `${new Date().getTime()}-${fileName}`;
            const generatedFileName = `${userId}/${uniqueFileName}`;

            const upload = new tus.Upload(file, {
                endpoint: `${env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/upload/resumable`,
                retryDelays: FileUploadProps.chunkRetryDelays,
                headers: {
                    authorization: `Bearer ${session?.access_token}`,
                    'x-upsert': 'true',
                },
                uploadDataDuringCreation: true,
                uploadLengthDeferred: false,
                removeFingerprintOnSuccess: true,
                metadata: {
                    bucketName: env.NEXT_PUBLIC_FILE_UPLOAD_BUCKET,
                    objectName: generatedFileName,
                    contentType: 'image/png',
                    cacheControl: '3600',
                },
                chunkSize: 6 * 1024 * 1024, // It must be set to 6MB for now
                onError(caughtError) {
                    error(caughtError.message);
                },
                onProgress(bytesUploaded, bytesTotal) {
                    progress(true, bytesUploaded, bytesTotal);
                },
                onSuccess() {
                    console.log(
                        'Download %s from %s',
                        upload?.options?.metadata?.objectName,
                        upload?.url,
                    );
                    load(upload?.url?.split('/')?.pop() ?? '');
                },
            });

            upload
                .findPreviousUploads()
                .then(function (previousUploads) {
                    if (previousUploads.length) {
                        upload.resumeFromPreviousUpload(previousUploads[0]);
                    }
                    upload.start();
                });

            return {
                abort: () => {
                    upload.abort();
                    abort();
                },
            };
        },
    }}
    {...FileUploadProps}
/>

Anyone have any ideas on how to troubleshoot or fix this? Any help would be appreciated!

Screen Recording of the Issue in React Filepond with TUS and Supabase Resumable Uploads

Solution:

The issue was coming from my supabase/config.toml file, which configures the Supabase Local Dev CLI. I had previously enabled TLS for HTTPS during some testing. Here's what I did to fix the problem:

1. Disabled TLS in the config file by changing the following:

[api.tls]
enabled = false

2. Updated the API URL:

api_url = "http://127.0.0.1:54321"

3. Made sure to also update this change in the environment files of the app that was making the upload requests to the Supabase API.