ABORTED REQ on storage resumable upload
Hello, we are building a react native app and need to upload an audio file (26mb) and realised it was more appropriate to use resumable uploads. Now we get this issue on failure and dont see any documentation around it. Pls help 🙂
Upload code in comment
1 Reply
import * as tus from "tus-js-client";
import { SUPABASE_ANON_KEY, SUPABASE_URL } from "./supabase";
type UploadParams = {
blob: Blob;
bucketName: string;
objectName: string;
contentType: string;
onProgress?: (
progressPercent: number,
bytesUploaded: number,
bytesTotal: number,
) => void;
};
/**
* Uploads a file to Supabase Storage using tus for resumable uploads.
* Requires the Storage bucket to allow the anon role (or adjust headers for a user session token).
*/
export async function uploadResumableToSupabase({
blob,
bucketName,
objectName,
contentType,
onProgress,
}: UploadParams): Promise<void> {
const directStorageHost = SUPABASE_URL.replace(
".supabase.co",
".storage.supabase.co",
);
const endpoint = `${directStorageHost}/storage/v1/upload/resumable`;
await new Promise<void>((resolve, reject) => {
const upload = new tus.Upload(blob, {
endpoint,
retryDelays: [0, 3000, 5000, 10000, 20000],
headers: {
authorization: `Bearer ${SUPABASE_ANON_KEY}`,
apikey: SUPABASE_ANON_KEY,
"x-upsert": "true",
},
uploadDataDuringCreation: true,
removeFingerprintOnSuccess: true,
metadata: {
bucketName,
objectName,
contentType,
cacheControl: "3600",
},
chunkSize: 6 * 1024 * 1024,
onError(error) {
reject(error);
},
onProgress(bytesUploaded, bytesTotal) {
if (onProgress) {
const percentage = Math.round((bytesUploaded / bytesTotal) * 100);
onProgress(percentage, bytesUploaded, bytesTotal);
}
},
onSuccess() {
resolve();
},
});
upload.findPreviousUploads().then((previousUploads) => {
if (previousUploads.length > 0) {
upload.resumeFromPreviousUpload(previousUploads[0]!);
}
upload.start();
});
});
}
import * as tus from "tus-js-client";
import { SUPABASE_ANON_KEY, SUPABASE_URL } from "./supabase";
type UploadParams = {
blob: Blob;
bucketName: string;
objectName: string;
contentType: string;
onProgress?: (
progressPercent: number,
bytesUploaded: number,
bytesTotal: number,
) => void;
};
/**
* Uploads a file to Supabase Storage using tus for resumable uploads.
* Requires the Storage bucket to allow the anon role (or adjust headers for a user session token).
*/
export async function uploadResumableToSupabase({
blob,
bucketName,
objectName,
contentType,
onProgress,
}: UploadParams): Promise<void> {
const directStorageHost = SUPABASE_URL.replace(
".supabase.co",
".storage.supabase.co",
);
const endpoint = `${directStorageHost}/storage/v1/upload/resumable`;
await new Promise<void>((resolve, reject) => {
const upload = new tus.Upload(blob, {
endpoint,
retryDelays: [0, 3000, 5000, 10000, 20000],
headers: {
authorization: `Bearer ${SUPABASE_ANON_KEY}`,
apikey: SUPABASE_ANON_KEY,
"x-upsert": "true",
},
uploadDataDuringCreation: true,
removeFingerprintOnSuccess: true,
metadata: {
bucketName,
objectName,
contentType,
cacheControl: "3600",
},
chunkSize: 6 * 1024 * 1024,
onError(error) {
reject(error);
},
onProgress(bytesUploaded, bytesTotal) {
if (onProgress) {
const percentage = Math.round((bytesUploaded / bytesTotal) * 100);
onProgress(percentage, bytesUploaded, bytesTotal);
}
},
onSuccess() {
resolve();
},
});
upload.findPreviousUploads().then((previousUploads) => {
if (previousUploads.length > 0) {
upload.resumeFromPreviousUpload(previousUploads[0]!);
}
upload.start();
});
});
}