Error "Request failed with status code 413" when upload image took by camera in React Native app

Question

I use 'React-native-image-picker' to upload image to my server :

 const options = {
            title: 'Chọn ảnh đại diện ',
            takePhotoButtonTitle: 'Chụp ảnh',
            chooseFromLibraryButtonTitle: 'Chọn từ thư viện',
            cancelButtonTitle: 'Thoát',
            noData: true


        };
ImagePicker.showImagePicker(options, (response) => {

            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                var FormData = require('form-data');
                const data = new FormData();
                data.append('file', {
                    uri: `file://${response.path}`,
                    type: response.type,
                    name: response.fileName

                });
              


                Axios.post('https://api.hoc68.com/api/v1/upload_files', data, {
                    headers: {
                        'Authorization': `Bearer ${stateTree.user.token_key}`,
                        'Content-type': 'multipart/form-data',
                    }
                }).then(res => console.log(res.data)).catch(e => console.log(JSON.stringify(e)))

                console.log(response.path + ' ' + response.uri + ' ' + response.type);
            }
        });

When I choose image from my download gallery, everything is fine, the server send the response back with uri. But when I choose image from my camera gallery or when I take a photo with my phone's camera and upload it, Axios catches this error. When I search this error in Google it says this happens when my file is too large. Can anyone tell me where my problem need to fix is , in my front-end code or my server code ?

score 0 · Answer 1 · answered Nov 05 '20 at 07:56

413 error code indicates that the image you are trying to upload in too large as referred here 413 Error Code details

so to avoid this one option is to compress you Image before uploading it to the server you can use package called ImageResizer

this is a code example how you can use it with axios :

ImageResizer.createResizedImage(uri, height, width, "JPEG", 60, 0).then(
  (response) => {
    let cleanUri =
      Platform.OS === "ios"
        ? response.uri.replace("file:/", "")
        : response.uri;
    data.append("image", {
      uri: cleanUri,
      name: "userImage.jpeg",
      type: "image/jpeg",
    });
    axios
      .post(PROFILE_PHOTOS_UPLOAD, data, config)
      .then((response) => {
        if (response.data.success === true) {
          if (key === PROFILE_IMAGE) {
            image = response.data.data.image;
          } else if (key === COVER_IMAGE) {
            image = response.data.data.cover_image;
          }
          dispatch({
            type: inAppActionTypes.CHANGE_PROFILE_IMAGE,
            key: key,
            url: image,
          });
        } else {
        //bad response
        }
      })
      .catch((err) => {
        // Oops, something went wrong. Check that the filename is correct and
        console.log("error while compressing the image");
        console.log(err);
       
      });

Error "Request failed with status code 413" when upload image took by camera in React Native app

1 Answers1