CODEWITHSUNDEEP
reactjsaxios
Arebhy Sridaran
Arebhy Sridaran

Reputation: 586

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

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?

Upvotes: 0

Views: 513

Answers (2)

user8554313
user8554313

Reputation:

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
    }

}

Upvotes: 1

Dor Shinar
Dor Shinar

Reputation: 1512

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.

Upvotes: 1

Related Questions