How to append array of images to server using formdata react native?

Question

I’m trying to post an item to my server. I’m using React Native for my front end and Laravel as my back-end. I have tried it many times but it keeps giving me Network request failed. Though I am trying it on postman and it works fine.

this is my demo code:

var dummyArray = [
                { 
                type: "image/jpeg", 
                uri: "file:///storage/emulated/0/Android/data/com..../files/Pictures/4cbc8fa0-5978-42a6-89ab-ea9639cb43e4.jpg", 
                name: ("file:///storage/emulated/0/Android/data/com.../files/Pictures/4cbc8fa0-5978-42a6-89ab-ea9639cb43e4.jpg").split("/").pop() 
                },
                { 
                    type: "image/jpeg", 
                    uri: "file:///storage/emulated/0/Android/data/com..../files/Pictures/e3de766a-5c67-4926-9a56-93b0c989970a.jpg", 
                    name: ("file:///storage/emulated/0/Android/data/com..../files/Pictures/e3de766a-5c67-4926-9a56-93b0c989970a.jpg").split("/").pop() 
                }
            ]

 const formdata = new FormData();
 formdata.append('images[]', this.state.imageArray);

you are trying it on postman and it works fine. that means server working fine. so may be you have some errors in react-native code or in connection — Aditya Sonawane
– Aditya Sonawane, Commented Nov 18, 2021 at 6:43

Khurshid Ansari · Accepted Answer · 2021-11-18 07:16:05Z

1

I have resolve similar and like below:

submitImage(images = [{ uri: "", fileName: "", type: "" }]) {
    const oFormData = new FormData();
    images.map((val) => {
        oFormData.append("image", {
            uri: val.uri,
            type: val.type,
            name: val.fileName
        });
    });
    return axios.post(PostServiceUrl, oFormData);
}

answered Nov 18, 2021 at 7:16

Khurshid Ansari

5,1152 gold badges39 silver badges63 bronze badges

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

Comments

beingbalveer · Accepted Answer · 2021-11-18 06:52:09Z

0

You are passing whole array as a single param which is wrong. You should add all the images one by one in form data

 let formData = new FormData();
        if (images.length > 0) {
          images.forEach((element) => {
            formData.append('images', element);
          });
        } else {
          formData.append('images', undefined);
        }

answered Nov 18, 2021 at 6:52

beingbalveer

742 bronze badges

Comments

A A · Accepted Answer · 2021-11-18 07:11:10Z

0

i have resolved my query with following code:

    Object.keys(dummyArray).forEach((item, i) => {
                                    
 formdata.append(`images[${item}]`, 
     {
          uri: dummyArray[item].uri,
          name: dummyArray[item].name,
          type: dummyArray[item].type
    }
 );
})

answered Nov 18, 2021 at 7:11

A A

113 bronze badges

Collectives™ on Stack Overflow

How to append array of images to server using formdata react native?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related