0

I am trying to upload a video from my IOS device library to S3 using axios and a pre-signed url. I've determined the axios/s3 part is working great, but the issue is coming from the uri I receive from 'react-native-image-picker'.

When I record a video in react-native the video uri uploads fine in S3, but when I grab a video from my photo library it uploads to S3 but it's not a video file.

I grab the video uri from my ios device library using react-native-image-picker.

import {launchImageLibrary} from 'react-native-image-picker';

launchImageLibrary({mediaType: "video"}, ({assets}) => {
        let {uri} = assets[0] //uri = /var/mobile/Containers/Data/Application/123/tmp/IMG_1779.mov
        uploadFile(uri)
      });

and then I attempt to upload the uri to S3

//save to s3 using presignedPost
uploadFile(uri){
        var formData = new FormData();
        ...
        formData.append("file", { uri });
        await axios.post(presignedPost.url, formData,{ 'Content-Type': 'multipart/form-data' } )
}

The function is successful, but when I look in AWS the file is just a text file with a bunch of random characters.

The good news is this same exact uploadFile functions works if I record a video with react-native-camera

import { RNCamera } from 'react-native-camera';

stopRecord(){
   let camera = cameraRef.current //grab camera <RNCamera ref={cameraRef} />
   let {uri = null} = await camera.recordAsync(); //uri = /var/mobile/Containers/Data/Application/123/Library/Caches/Camera/123.mov
   uploadFile(uri)
}

The only difference I can see is the uri after recording a video is stored in cache. Therefore, I attempted to use 'react-native-fs' to grab the picker uri, save it to cache, and then upload the cached file but I got the same error (file uploads to s3 but not a video).

import * as RNFS from 'react-native-fs';

uploadFileTwo(uri){
   let base64Data = await RNFS.readFile(uri, 'base64')
   let cachePath = RNFS.CachesDirectoryPath + "/" + fileName + ".mov"
   await RNFS.writeFile(cachePath, base64Data, 'base64')
   
   var formData = new FormData(); 
   ...
   formData.append("file", { uri: cachePath });
   await axios.post(presignedPost.url, formData,{ 'Content-Type': 'multipart/form-data' } )
}

So now I am out of options. Why would the 'react-native-camera' uri work great, but the 'react-native-image-picker' uri doesn't?

Will
  • 605
  • 2
  • 11
  • 23
  • Please let me know, Are you about to upload the video file to AWS or your backend? as you are using the API call to send the file to server – Jignesh Mayani Jul 12 '21 at 13:47
  • I'm creating an s3.createPresignedPost url on my backend, sending that back to frontend, and then attempting to upload the video file directly from the frontend to s3 using the createPresignedPost via axios. It works perfectly when I'm using the uri from react-native-camera, but it doesn't like the uri from react-native-image-picker. The await axios.post(presignedPost.url) function uploads it directly to s3. – Will Jul 12 '21 at 13:52
  • Okay! but we also can upload the file without the api call but for this we will require the configuration files to initialize the aws and connect the app with the aws and after that we simply can call a method to upload file to aws – Jignesh Mayani Jul 12 '21 at 13:55
  • I'm not following you. Do you know why the uri file from the picker won't work? – Will Jul 12 '21 at 13:57
  • Okay let me deep dive into this. – Jignesh Mayani Jul 12 '21 at 13:59

1 Answers1

0

Have a try by following the Tutorial for uploading video file.

I think this tutorial meets all your requirements as it uses react-native-image-picker to upload the video file(s).

Jignesh Mayani
  • 6,937
  • 1
  • 20
  • 36