CODEWITHSUNDEEP
javascriptnode.jsasynchronouspromiseaxios
Harshit Khanna
Harshit Khanna

Reputation: 133

Write multiple images to disk using Node.js

Explanation of the code:

In the first .then(), I'm getting the data of 10 images. Then using a for of loop, I'm traversing on each individual image. In the next line, I'm generating a different path to save the image to hence the ${count}.

Now the main part

I'm using axios to get the image by passing in the image.url. In the .then(), I'm getting the response and I'm piping it to the path I generated beforehand.

Resolving if data is fetched and incrementing the count to change the path in the next iteration. Rejecting if any error occurs

I'm doing console.log(count++) to check if I'm iterating over all 10 images and i'm getting '1 2 ....10' output which means everything is working fine.

Problem: Acc to the code, 10images should be saved in the images folder with names 'image1, image2 ...image10'. But I'm getting just the first image. What am I doing wrong? Should writing stuff to the disk be done in for loops?

client.search('Steve Angello')
.then(images => {
    let count = 1;

    for(image of images){
        const path1 = path.resolve(__dirname, 'images', `image ${count}.jpg`);
        axios({
            method: 'GET',
            url: image.url,
            responseType: 'stream'
        })
        .then((response) => {
                response.data.pipe(fs.createWriteStream(path1));

                return new Promise( (resolve, reject) => {
                    response.data.on('end', () => {
                        resolve();
                        console.log(count++);
                    })

                    response.data.on('error', (error) => {
                        reject(error);
                    })
                })
            })
        .catch((err) => console.log(err));   
    }

});

Snapshot of the output

Upvotes: 0

Views: 751

Answers (1)

Leftium
Leftium

Reputation: 17923

All the images are being saved to a file named 'image 1.jpg' (10 times). You can confirm this by adding a console.log right before your call to axios.

I think the simplest solution is to change your loop from

for(image of images){
    const path1 = path.resolve(__dirname, 'images', `image ${count}.jpg`);

to 

for (count = 0; count < images.length; count++) {
    image = images[i];
    const path1 = path.resolve(__dirname, 'images', `image ${count+1}.jpg`);
    // and any other references to count should be removed

Upvotes: 3

Related Questions