CODEWITHSUNDEEP
javascriptvideoreact-native
Christopher Bradshaw
Christopher Bradshaw

Reputation: 2775

Upload video in react-native

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.

Upvotes: 3

Views: 19593

Answers (3)

qloveshmily
qloveshmily

Reputation: 1051

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

Upvotes: 2

Harsh Srivastava
Harsh Srivastava

Reputation: 359

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

Upvotes: 16

Andreyco
Andreyco

Reputation: 22872

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

Upvotes: 0

Related Questions