Download multiple images from a webpage

If you need to create local copies of all media files on a web page, adapt the code below and run in Developer Tools console.

1. identify the media files to download
2. select the target local directory
3. specify how you want to name the downloaded files 

This example downloads all images with the class “related-artwork-image”; files are named using the alt attribute (if defined)

(() => {
    const run = async () => {
    	
    	/*
        ** 1. querySelector identifies media files to download
        */
        const imgs = document.querySelectorAll("img.related-artwork-image");
        
        const nbImgs = imgs.length;
        
        if (nbImgs === 0) {
            console.error("NO IMAGES SELECTED FOR DOWNLOAD");
            return;
        }
        
        // Prompt for local file sytem directory for the download
        const dirHandle = await window.showDirectoryPicker({startIn: 'downloads'});
        
        // Delete any files in the target directory
        const promises = [];
        for await (const entry of dirHandle.values()) {
            if (entry.kind==="file") {
                promises.push(dirHandle.removeEntry(entry.name));
            }
        };
        await Promise.all(promises);

		/*
        **  2. Use alt attribute to name files (default to sequence number)
        */
        let filename, url, n;
        for (let i=0; i<nbImgs; i++) {
            n = i+1;
            
            
            url = imgs[i].currentSrc.split("?")[0];
            
            filename = imgs[i].alt.trim().replace("?","").replace(":","-");
            if (!filename) {
                filename = "img"+n.toString().padStart(4, 0);
            }

            console.log("downloading "+n+ "/"+nbImgs + " -" + filename);
            try {
                const response = await fetch(url);
                const file = await dirHandle.getFileHandle(filename, { create: true });
                const writable = await file.createWritable();
                await response.body.pipeTo(writable);
            } catch (err) {
                console.error(err + " filename:" + filename);
                break;
            };
            //await wait(5000);
        };
    };

    
    run();
})()