Question 296898 in React native Question posted in
The official React Native documentation can be found here.

Cannot upload most video files to supabase server in React Native

I have the issue that some files, for example many videos seemingly cannot be properly uploaded with base64 encoding, but with React Native the update function of supabase only works with base64 encoding, i can’t upload them. Is there any workaround i haven’t seen yet? Any help is appreciated!

This is my code:

      const base64 = await FileSystem.readAsStringAsync(uri, {
        encoding: FileSystem.EncodingType.Base64,
      });

      const { error } = await supabase.storage
        .from("files")
        .upload(filePath, decode(base64), {
          contentType: mimeType,
        });

The error i get: "TypeError: Network request failed"

Documentation of supabase: https://supabase.com/docs/reference/javascript/storage-from-upload?example=upload-file-using-arraybuffer-from-base64-file-data

Supabase documentation. Upload only possible with base64 encoding?

I tried using a different encoding function, upload with blob and just directly giving the function the file returned by the DocumentPicker. Looked up if any other variables are incorrect, but everything else works as it should. Images and even one specific video are being uploaded correctly.
The DocumentPicker (from expo):

      result = await DocumentPicker.getDocumentAsync({
        type: "*/*", // Allow all file types
        copyToCacheDirectory: true,
      });

I really don’t know how i could fix this. Please help!

Tags:

2

Answers


  1. 0

    Did you see in the Supabase documentation that they recommend that you use TUS Resumable Uploads for any file larger than 5MB? (remember: base64 encoding will greatly increase the size of your data)

    Login or Signup to reply.
  2. 0

    Despite the specification says FormData does not work as intended, this works. Here uri is from ImagePicker.

    const formData = new FormData();

formData.append("file", {
  name: "0B5E8DE9-0388-48D7-996C-1E2FAC9A812C.jpg",
  type: "image/jpg",
  uri: "file:///Users/.../ImagePicker/0B5E8DE9-0388-48D7-996C-1E2FAC9A812C.jpg",
});

const { error } = await supabase.storage
  .from("files")
  .upload(filePath, formData);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search