Supabase: Resumable uploads RLS

handle-file-upload-tus.ts

  const handleFileUploadTUS = async (formData: FormData) => {
    const origFile = formData.get("audio") as File;
    const file = new File([origFile], encodeURIComponent(origFile.name), {
      type: origFile.type,
    });
    const {
      data: { session },
    } = await supabase.auth.getSession();

    if (!session?.access_token) {
      console.error("NO ACCESS TOKEN");
      throw new Error("No access token");
    }

    // This succeeds
    supabase.storage
      .from("tapes")
      .upload(`${user?.id}/${secureId()}/raw`, file, {});

    // This fails RLS
    uploadViaTus({
      file,
      bucketName: "tapes",
      fileName: `${user?.id}/${secureId()}/raw`,
      acceessToken: session?.access_token,
    });
  };

tus.client.ts

import * as tus from "tus-js-client";

export const uploadViaTus = async ({
  acceessToken,
  bucketName,
  fileName,
  file,
}: {
  acceessToken: string;
  bucketName: string;
  fileName: string;
  file: File;
}) => {
  return new Promise(async (resolve, reject) => {
    var upload = new tus.Upload(file, {
      endpoint: `${window.WINDOW_ENV.SUPABASE_URL}/storage/v1/upload/resumable`,
      retryDelays: [0, 3000, 5000, 10000, 20000],
      headers: {
        apikey: `${window.WINDOW_ENV.SUPABASE_ANON_KEY}`,
        authorization: `Bearer ${acceessToken}`,
        "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: file.type,
        cacheControl: "3600",
      },
      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(upload);
        console.log("Download %s from %s", file.name, upload.url);
        resolve(file);
      },
    });

    // 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();
    });
  });
};