Error: Network Error, when upload image with axios

Question

Im trying to upload image by using react-native-image-crop-picker and axios so heres my code:

ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true,
            forceJpg:true,
            mediaType:'photo'
          }).then( async (image) => {
            try {
                //console.log(image);
                var myImage = {
                    uri:image.path,
                    //uri:image.path,
                    name: 'profile_pic.jpeg',
                    type: image.mime, // or photo.type
               };

                //var test = {uri:image.path,type:image.mime,name:'MY_IMAGE'};
                let response = await APIUpdateProfile(myImage);
                console.log(response);
            } catch (error) {
                showMessage({
                    message: error.message,
                    type: "danger",
                    titleStyle:{fontSize:18}
                });
            }
          }).catch(() => { });

// from another file
export async function APIUpdateProfile(data){

    try{
        const options = {
            headers: {
                Accept: "application/json",
                "Content-Type": "multipart/form-data"
            }
        };

        const form_data = new FormData();
        form_data.append('image', data);
        console.log(form_data);
        const res = await axios.post(c.UPDATE_PROFILE, form_data,options);
        return res.data;
    }catch (e) {
        console.log(e);
        throw handler(e);
    }
}

and my php api headers:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Content-Type: multipart/form-data");

The Output

{"_parts": [["image", [Object]]]}
[Error: Network Error]

I think you should change multipart/form-data to application/x-www-form-urlencoded , and it should work. — CevaComic
– CevaComic, Commented Jun 12, 2020 at 15:50
Really strange, I have something similar, is just that i'm using redux-saga and axios to send the avatar. — CevaComic
– CevaComic, Commented Jun 12, 2020 at 20:01

olaleye olabanjo · Accepted Answer · 2021-05-27 13:23:01Z

3

change this line: form_data.append('image', data);

To form_data.append('image', JSON.stringify(data));

from https://github.com/react-native-image-picker/react-native-image-picker/issues/798

You need to add this uesCleartextTraffic="true" to the AndroidManifest.xml file found inside the dir android/app/src/main/AndroidManifest.xml

<application ... android:usesCleartextTraffic="true"> Then, Because of issue with Flipper Network.

I commented initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

in this file /android/app/src/main/java/com/{your_project}/MainApplication.java

Also, commenting out line number 43 in this file android/app/src/debug/java/com/**/ReactNativeFlipper.java

line43: builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

answered May 27, 2021 at 13:23

olaleye olabanjo

1488 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error: Network Error, when upload image with axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related