Uploading videos using formdata in react native

Question

Has anyone successfully uploaded a video via React Native Formdata()? The code below attempts to upload a .mov file from the camera roll URI but in fact only the first frame of the video (a JPEG) gets uploaded. What's the issue here?

var movVideo = {
  uri: uriFromCameraRoll,
  type: 'video/quicktime',
  name: 'something.mov',
};

var body = new FormData();
body.append('video', movVideo);
body.append('title', 'A beautiful video!');

fetch('https://mysite/upload_asset', {
  method: "POST",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'multipart/form-data'
  },
  body: body,
}).then((response) => response.json())
  .then((responseJson) => {
    //only the first frame of the video got uploaded
    console.log(responseJson);
});

Answer 1

Had the same issue. Looks like React Native does not return the correct stream for videos with asset library URIs. Pictures seem to work fine. I would need to dig deeper before submitting an issue though.

I suggest you take a look at react-native-fetch-blob, which provides an improved fetch polyfill with Blob support. This implementation handles videos from the camera roll just fine. Also, the changes needed to use this module are minimal (include the polyfill, wrap URI with RNFetchBlob.wrap).