how to get data into an array after post using axios in reactjs

Question

I am creating album using reactjs. I'm using loopback-storage-connector for storing images.

this is my code for uploading image

fileUploadCarImg =()=>{
    for (let index = 0; index < this.state.file.length; index++) {
        const element = this.state.file[index];
        const fd = new FormData();
        fd.append('image2',element,element.name )
        axios.post('http://localhost:3000/api/attachmentBanks/Car_Image/upload',fd , {
            onUploadProgress : ProgressEvent => {
                console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
            }
        })
        .then(res => {
            console.log(res.data.result.files.image2[0].name)
        });

    }

}

I want to store those image names into loopback-mysql-connector. so my idea is storing each and every image name (res.data.result.files.image2[0].name) into an array.

while uploading image console.log(this.state.file) print

Array(8) [ File, File, File, File, File, File, File, File ]

(8) […]

0: File { name: "IMG_20150905_072534.jpg", lastModified: 1442772056000, size: 241381, … }

1: File { name: "IMG_20151110_115108.jpg", lastModified: 1447206282000, size: 2749010, … }

2: File { name: "IMG_20151110_115124.jpg", lastModified: 1447206242000, size: 2797533, … }

3: File { name: "IMG_20151110_120625.jpg", lastModified: 1447205916000, size: 725661, … }

4: File { name: "IMG_20151110_120642.jpg", lastModified: 1447206122000, size: 687308, … }

5: File { name: "IMG_20151110_120704.jpg", lastModified: 1447205958000, size: 3364141, … }

6: File { name: "IMG_20151110_121043.jpg", lastModified: 1447205998000, size: 2921138, … }

7: File { name: "IMG_20151110_121050.jpg", lastModified: 1447206044000, size: 3867974, … }

length: 8

<prototype>: [

I just need to store name of the image. Anyone please give any hint to solve my problem?

user8554313 · Accepted Answer · 2019-01-20 18:41:05Z

1

Please, consider to use await

let data = [];
for (let index = 0; index < this.state.file.length; index++) {
    const element = this.state.file[index];
    const fd = new FormData();
    fd.append('image2',element,element.name )

    try {
        const res = await axios.post('http://localhost:3000/api/attachmentBanks/Car_Image/upload',fd , {
            onUploadProgress : ProgressEvent => {
                console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
            }
        });

        data.push(res.data.result.files.image2[0].name);

    } catch(error) {
        //your handler
    }

}

answered Jan 20, 2019 at 18:41

user8554313

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

Comments

Dor Shinar · Accepted Answer · 2019-01-20 18:38:37Z

1

I suggest using the Array.prototype.map() function:

const names = res.data.result.files.map((file) => file.image2[0].name);

The array is quite hard to decipher, but with minor adjustments it should work.

answered Jan 20, 2019 at 18:38

Dor Shinar

1,5222 gold badges11 silver badges17 bronze badges

7 Comments

Arebhy Sridaran Over a year ago

thank you sir, but shall I write your code under he then part in axios?

Dor Shinar Over a year ago

Yes, just put it where you logged the result

Arebhy Sridaran Over a year ago

sir but, my console.log(names) code not display anything

Dor Shinar Over a year ago

Could you provide the schema for the object you receive? It might be easier to help you this way

Dor Shinar Over a year ago

Please edit your question and add that information there. Questions in this site should contain all the information available.

|

Collectives™ on Stack Overflow

how to get data into an array after post using axios in reactjs

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related