How to resize or compress the image to the minimum before posting by form-data body in react native to avoid error 413?

Question

I use 'expo-image-picker' library to get image.

let result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.Images,
                aspect: [3, 3],
                quality: 0,
                allowsMultipleSelection: false,
                allowsEditing: true,
});

I try to set quality = 0 but when I send request by method post to server, I get** 413 error.**

const register = async (data, image) => {
const bodyFormData = new FormData();
        bodyFormData.append('name', data.name);
        console.log(image);
        if (image) {
            const fileType = image.split('.').pop();
            const mimeType =
                fileType === 'png' || 'jpg' || 'jpeg' || 'PNG' || 'JPG' || 'JPEG';
            bodyFormData.append('avatar', {
                uri: image,
                name: `image.${fileType}`,
                type: mimeType,
            });
        }
        bodyFormData.append('email', data.email);
        bodyFormData.append('password', data.password);
        return await requester({
            requestFunc: () =>
                Request.Server.post(API_SERVER.REGISTER(), bodyFormData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                }),
        })();
    };

I tried to send a request with some low resolution photos, but it still works.

I also find out about "Expo ImageManipulator" library, but it also set "quality" same as "expo-image-picker" library.

If the image is extremely large then setting the quality like that is really not optimal, so is there any way to limit it?

Sorry because my Englist is not good, thank everyone!

Setting 'quality' by Expo ImageManipulator lib is my solution — Mai Đức Thắng, Apr 21 '23 at 03:49

score 2 · Accepted Answer · answered Apr 28 '23 at 07:13

Obtain the image from the expo-image-picker and get its URI:

let result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsEditing: true,
  aspect: [4, 3],
  quality: 1,
});

Use the ImageManipulator to resize or compress the image. Here's an example of resizing the image to 50% of its original size:

const manipResult = await ImageManipulator.manipulateAsync(
  uri,
  [{resize: {width: result.width / 2, height: result.height / 2}}],
  {compress: 0.5, format: ImageManipulator.SaveFormat.JPEG}
);

const resizedUri = manipResult.uri;

Finally, use the resizedURI to create a new FormData object and append the image data to it:

const formData = new FormData();
formData.append('image', {
  uri: resizedUri,
  name: 'image.jpg',
  type: 'image/jpeg',
});

// post formData to server

// post formData to server

This way, you can resize or compress the image before posting it to the server, which can help avoid the 413 Payload Too Large error.

Well, This might solve the current use case. But I would recommend you use the API for the same. It will help you to manage enough payload and scalability, and customised resizing features.

How to resize or compress the image to the minimum before posting by form-data body in react native to avoid error 413?

1 Answers1