Is there a way to upload video to a server in react native?

I've looked into the react-native-uploader plugin on github, but it doesn't give any guidance on video uploads if it's even possible with that plugin.

Is there a way to upload video to a server in react native?

I've looked into the react-native-uploader plugin on github, but it doesn't give any guidance on video uploads if it's even possible with that plugin.

• javascript
• video
• react-native

• What do you mean by uploading a video ? You what to upload a video to a server ? You want to load and read a video ? – Antoine Grandchamp Commented Jun 14, 2017 at 19:38
• I want to take a video from the phone/tablet and then upload it to a server. – Christopher Bradshaw Commented Jun 14, 2017 at 20:40

3 Answers 3

Just use fetch for uploading

let formData = new FormData();
formData.append("videoFile", {
    name: name.mp4,
    uri: video.uri,
    type: 'video/mp4'
});
formData.append("id", "1234567");

try {
    let response = await fetch(url, {
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data',
        },
        body: formData
    });
    return await response.json();
}
catch (error) {
    console.log('error : ' + error);
    return error;
}

Here is another answer, using rn-fetch-blob in RN 0.57.8.

postVideo = (video,url) =>  {
    RNFetchBlob.fetch('POST',url, {
         'content-type': 'multipart/form-data',
         "Accept":"multipart/form-data",
         'access-token': AuthToken.token, //token from server
      },[
        //the value of name depends on the key from server
        {name: 'video', filename: 'vid.mp4', data: RNFetchBlob.wrap(video.uri) },
      ]).then(response => response.json())
        .then(response => {
            if (response.status === 'success') {
                alert("Upload success");
                this.props.navigation.navigate('publish');
            } else {
               alert(response.msg);
            }})
         .catch((err) => {
             alert(err);
        })
    }

Yes, it is possible.

• you have to be running React Native 0.45.0 or higher, which do support accessing videos from camera roll.
• you have to receive reference to image/video access from camera roll by calling CameraRoll.getPhotos(params) (more on this in docs)
• then, use RNUploader.upload(...) to send assets to your serve (you need to link lib before!)