1

I am fetching video from mobile using react-native-image-picker and uploading it to the server by using the fetch method. Don't know what I am doing wrong?

constructor(props){
 super(props);
 this.state = {
   isLoading:true,
   isModalVisible: false,
   isOptionVisible:false,
   avatarSource:"",
   chapname:'',
   chapdesc:''
 }
};

var formData = new FormData();
formData.append('name', 'video name');
formData.append('desc', 'video description');
formData.append('file', {uri: this.state.avatarSource, name: this.state.avtarname.fileName, type: 'video/mp4'});

fetch(api, {
  method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type' :'multipart/form-data',
      'Authorization': `JWT ${teacher_token}`
    },
    body: formData
})

and here is the response when I pick a video from phone

{path: "/storage/emulated/0/DCIM/Camera/VID_20200306_172706.mp4", uri: "content://com.miui.gallery.open/raw/%2Fstorage%2Fe…ted%2F0%2FDCIM%2FCamera%2FVID_20200306_172706.mp4"}

the error I getting is a network request failed. Here is the error which gets on the console 

Fetch Error TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (E:\eshikshaserver\node_modules\whatwg-fetch\dist\fetch.umd.js:473)
at XMLHttpRequest.dispatchEvent (E:\eshikshaserver\node_modules\event-target-shim\dist\event-target-shim.js:818)
at XMLHttpRequest.setReadyState (E:\eshikshaserver\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574)
at XMLHttpRequest.__didCompleteResponse (E:\eshikshaserver\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388)
at E:\eshikshaserver\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:501
at RCTDeviceEventEmitter.emit (E:\eshikshaserver\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
at MessageQueue.__callFunction (E:\eshikshaserver\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436)
at E:\eshikshaserver\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111
at MessageQueue.__guard (E:\eshikshaserver\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384)
at MessageQueue.callFunctionReturnFlushedQueue (E:\eshikshaserver\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110)

I know something I am missing but can not find it. Stucked on it.

Mayuresh Patil
  • 2,072
  • 1
  • 21
  • 44
  • I think we need more details on what's the `state` containing. Also it would be grat to know if you have any logs on the network tab. – Bastian E. Mar 28 '20 at 18:09
  • @BastianE.Thanks for your response. I updated my question and code, please see and no any changes on the network tab when I am posting a video. Actually, this error is from my side only which is before hitting the API. – Mayuresh Patil Mar 30 '20 at 06:54

0 Answers0