CODEWITHSUNDEEP
javascriptreact-nativeaxios
PermBAN
PermBAN

Reputation: 21

Error: Network Error, when upload image with axios

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]

Upvotes: 2

Views: 2533

Answers (1)

olaleye olabanjo
olaleye olabanjo

Reputation: 148

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));

Upvotes: 3

Related Questions