supabase / cli

Supabase CLI. Manage postgres migrations, run Supabase locally, deploy edge functions. Postgres backups. Generating types from your database schema.
https://supabase.com/docs/reference/cli/about
MIT License
1.09k stars 212 forks source link

File Uploads Fail Beyond 6MB Limit with TUS in Supabase CLI (Resumable Uploads) #2729

Open eldevyas opened 1 month ago

eldevyas commented 1 month ago

Describe the bug I'm encountering an issue with file uploads using FilePond and TUS in Supabase CLI. Files under 6MB upload successfully, but uploads of larger files consistently fail.

To Reproduce Steps to reproduce the behavior:

  1. Open the Supabase Local CLI Dashboard.
  2. Create a storage bucket.
  3. Upload a file smaller than 6MB and confirm it uploads without issues.
  4. Attempt to upload a file larger than 6MB (for example, a 7MB file).
  5. Observe that the upload process fails, displaying an error message.

Expected behavior I expected that larger files would upload smoothly since TUS is designed for resumable uploads. A failure for files larger than 6MB is concerning, as it severely limits the functionality of my app. Our users may need to upload significantly larger files, so this behavior is not acceptable.

Screenshots I've recorded a video demonstrating the issue in my Next.js app, but here’s a quick text log of what I see in the Supabase CLI local dashboard:

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

Then it fails with the following error:

Failed to upload 7MB example.jpg: tus: failed to resume upload, caused by [object ProgressEvent], originated from request (method: HEAD, url: [insert URL here]), response code: n/a, response text: n/a, request id: n/a

https://github.com/user-attachments/assets/406ebb92-7c8a-47ae-bf54-3f600031eb9d

System information

SERVICE IMAGE LOCAL LINKED
supabase/postgres 15.1.1.78 -
supabase/gotrue v2.158.1 -
postgrest/postgrest v12.2.0 -
supabase/realtime v2.30.34 -
supabase/storage-api v1.10.1 -
supabase/edge-runtime v1.58.3 -
supabase/studio 20240729-ce42139 -
supabase/postgres-meta v0.83.2 -
supabase/logflare 1.4.0 -
supabase/supavisor 1.1.56 -

Additional context I previously disabled built-in chunking in FilePond, hoping it would resolve the issue, but the problem persists.

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

<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, // 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}
/>

Thanks for any help or insights you can provide!

thebrrt commented 1 month ago

Hello eldevyas - please make sure your file sharing implementation setting in Docker Desktop is set to osxfs (Legacy) like in the screenshot below:

image

That fixes some issues with Supabase storage, but personally, I encountered too many issues to make it viable on my MacBook. I ended up getting a Linux VPS for this

eldevyas commented 1 month ago

Hi @thebrrt, thank you for the advice about the 'osxfs' setting. I switched from Docker to OrbStack because of CPU spikes, but OrbStack doesn't have a similar setting. I will switch back to Docker to test it. Your help is greatly appreciated!

eldevyas commented 1 month ago

@thebrrt I switched to Docker, re-installed all the docker images related to Supabase Local Dev CLI, and changed the setting of file sharing implementation to osxfs as you mentioned, but I still got the same error somehow:

CleanShot 2024-10-05 at 03 27 34@2x

My Docker Settings:

CleanShot 2024-10-05 at 03 33 48@2x

eldevyas commented 1 month ago

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.

After making these changes, the upload issue was resolved, and file uploads are working as expected now. I hope the Supabase team can release a fix to make it work smoothly with TLS enabled.