jstoone · November 7, 2025 02:31 · vasquezcristhian340-web · Nov 7, 2025
diff --git a/handle-file-upload-tus.ts b/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,
    });
  };
diff --git a/tus.client.ts b/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();
    });
  });
 };
	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,
	});
	};
	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();
	});
	});
	};