androidreact-nativefile-uploadreact-native-image-pickerreact-native-image

How to upload large files using react-native-image-crop-picker


I'm trying to upload small files using react-native-image-crop-picker it's working fine but when I tried uploading large video/image file using react-native-image-crop-picker I'm getting Network error.

Note : Backend is working fine I'm able to upload file using Postman.

It's happening with large files only. I'm able to upload files that are smaller than 1MB

Code

   

import ImagePicker from 'react-native-image-crop-picker';
import axios from "axios";

function uploadFile(){

ImagePicker.openCamera({
  mediaType: 'any',
}).then(file=> {

   const body = new FormData();

    body.append('vurl', {
      name: file.fileName,
      type: file.mime,
      uri: Platform.OS === 'ios' ? file.path.replace('file://', '') : file.path,
    });

 
   axios({
      method:"post",
      url:"Server url",
      data:body,
      headers: {
        Accept: 'application/json',
        'Content-Type': "multipart/form-data",
      }
    })
      .then((res) => {
        console.log(JSON.stringify(res));
      })
      .catch((err) => {
        console.log(err.response);
      });

});

}



//calling here

<TouchableOpacity onPress={uploadFile}>
    <Text>upload file</Text>
<TouchableOpacity>


Solution

  • Please check that you have set or not client_max_body_size in your backend for the server. For Nginx :- /etc/nginx/proxy.conf

    client_max_body_size 100M; 
    

    For more: Increasing client_max_body_size in Nginx conf on AWS Elastic Beanstalk