1

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>
Hemendra Khatik
  • 371
  • 4
  • 22

3 Answers3

1

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

manzt
  • 454
  • 2
  • 12
  • How is OP able to upload using Postman if Nginx doesn't allow large files? – ahron Nov 26 '21 at 04:37
  • Postman by default has 50 MB of file size in Settings and for Nginx default value for client_max_body_size is 1MB. – manzt Nov 27 '21 at 09:15
  • Yes, but the Postman request still has to go through Nginx which is at the default of 1MB (before making the change suggested in this answer). So how does the OP claim *Note : Backend is working fine I'm able to upload file using Postman.* @hemendra-khatik In any case, it is not obvious from the question that Nginx is being used. – ahron Nov 30 '21 at 04:55
  • It's just an example that I suggested. You can also check the "apache" request body limit via this example: https://stackoverflow.com/questions/11686288/apaches-limit-to-post-request-size – manzt Nov 30 '21 at 08:17
  • Yes Nginx or Apache it doesn't matter. What I am unable to understand is if the request is going through with Postman, why is React failing? They are both hitting the exact same backend. So if Nginx/Apache/serverside was the problem it would also fail with Postman. – ahron Nov 30 '21 at 08:47
-1

Make sure that you don't have a default timeout defined in the code like:

.defaults.timeout = x

https://www.npmjs.com/package/react-native-axios#config-defaults

zelda11
  • 425
  • 2
  • 7
-1

I produced my suggestions by following directly from react-native-image-crop-picker example app repo here:

  1. Set max height and width of what you're recording on camera. Example :

ImagePicker.openCamera({
      mediaType: 'any',
      cropping: cropping, 
      width: 500,
      height: 500,
    }).then(file=> {
  1. Compressing the quality of an image that you are picking

 ImagePicker.openPicker({
      mediaType: 'any',
      compressImageMaxWidth: 1000,
      compressImageMaxHeight: 1000,
      compressImageQuality: 1, ----> you can set the value between 0 and 1 e.g. 0.6.
    })
    .then(file=> {.....
  1. Set a max size should not exceed e.g. 1MB (whatever number you want) when you get the response before handling it further. Again I obtained file.size in the response section of the link above

 ImagePicker.openCamera({
      mediaType: 'any',
    }).then(file=> {
    
       if (file.size > xxx) {
    Alert.alert('File size too large!') 
    //dont forget to import alert from react-native
    }
Danniella
  • 11
  • 1