Cannot upload most video files to supabase server in React Native

Question

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!

user18309290 · Accepted Answer · 2023-12-02 08:23:46Z

1

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);

answered Dec 2, 2023 at 8:23

user18309290

8,5003 gold badges9 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

timo_omit Over a year ago

This doesn't work. The append function seems to work in React Native a little bit different than in React. But an approach with formData in React Native doesnt work either. One thing which i seem to get now (i don't know why i didn't get that before) is that i get with my original code the warning: "Error: Cannot create URL for blob" even with the images (They are still uploaded correctly). I suppose that i am creating a blob through the definition of the constant "base64", but shouldn't "decode(base64)" take care of that? I shouldn't be uploading a blob.

timo_omit Over a year ago

The issue was that the base nginx upload maximum is at 1MB, so every file above 1 MB wasn't uploadable. The file with under 300 kb was a mistake on my behalf, i probably misread.

Adrian Mole · Accepted Answer · 2023-12-02 11:34:11Z

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.)

edited Dec 2, 2023 at 11:34

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Dec 1, 2023 at 19:55

Greg Fenton

2,8361 gold badge18 silver badges33 bronze badges

1 Comment

timo_omit Over a year ago

I didn't see that. Thanks! A video file with less than 300 KB however shouldn't be inflated to more than 5MB, right? I will keep that information in mind, but first i want to actually be able to upload videos in general.

Collectives™ on Stack Overflow

Cannot upload most video files to supabase server in React Native

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related