Loop through array of file urls and download each one with React

Question

I'm trying to do what I 'thought' would be a simple task. I have an array of URLs that I'd like to loop through and download on to the client machine when the user clicks a button.

Right now I have a parent component that contains the button and an array of the urls (in the state) that I'd like to loop through and download. For some reason, the way I'm doing it now only downloads one of the files, not all of the contents of the array.

Any idea how to do this correctly within React?

handleDownload(event){
        var downloadUrls = this.state.downloadUrls;
        downloadUrls.forEach(function (value) {
            console.log('yo '+value)
        const response = {
              file: value,
        };                
            window.location.href = response.file;

        })
    }

Because I have an array of URLs in my state. downloadUrls = ["file1", "file2", "file3"]. Users are able to select checkboxes of files that they would like to download before clicking the parent "Download all selected" button. — JDun
– JDun, Commented May 3, 2017 at 1:03
thats not an answer. what is the use or the point of calling slice? what are you trying to accomplish there? — John Ruddell
– John Ruddell, Commented May 3, 2017 at 1:49

Tom Chen · Accepted Answer · 2017-05-03 00:44:20Z

2

I would use setTimeout to wait a little bit between downloading each files.

handleDownload(event){
    var downloadUrls = this.state.downloadUrls.slice();
    downloadUrls.forEach(function (value, idx) {
        const response = {
          file: value,
        };
        setTimeout(() => {
            window.location.href = response.file;
        }, idx * 100)
    })
}

In Chrome, this will also prompt the permission asking for multiple files download.

answered May 3, 2017 at 0:44

Tom Chen

4481 gold badge4 silver badges9 bronze badges

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

1 Comment

Mike Shiyan Over a year ago

If URLs can be opened in a browser, this solution would open them instead of downloading.

Collectives™ on Stack Overflow

Loop through array of file urls and download each one with React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related