title: How to download large size files with axios as stream and download as zip in reactjs
body: <p>I am building a frontend application to download files from a remote object storage server like S3. Since there is no server code in my application, therefore downloading and zipping of the file is done in the browser itself. </p>
  
  <p>Now The code is working fine to download small size file but it crashes the browser while handling larger files.</p>
  
  <p>I am using Axios and JsZip utility in React js to build the application.
  Can I use tar to avoid the usage of browser memory? Or is there a way to store the file stream in the local storage of the computer directly instead of saving in the browser's memory until the total file is downloaded.</p>
  
  <p>Below is the code of my current implementation:</p>
  
  <pre><code>import axios from 'axios'
  import JSZip from 'jszip'
  import saveAs from 'file-saver'
  
  const downloadObjectAsZip = (dispatch, urlArray) =&gt; {
    let zip = new JSZip()
    let count = 0
    const CancelToken = axios.CancelToken
    source = CancelToken.source()
    urlArray.forEach((result) =&gt; {
    axios({
      url: result.url,
      method: 'GET',
      responseType: 'blob',
      cancelToken: source.token,
      onDownloadProgress: function(progressEvent) {
          // Update progress in progress bar
      }
      }).then((response) =&gt; {
          count++
      if (response.data.size) {
          const fileName = result.name
          zip.file(fileName, response.data, { binary: true })
  
      }
  
      }).catch((thrown) =&gt; {
              if (axios.isCancel(thrown)) {
          console.log('request cancel by user')
      } else {
          console.error('axios error', thrown.message);
      }
      })
  
      if(urlArray.length == count){
        zip.generateAsync({ type: "blob" }).then(function(content) {
          saveAs(content, `archive.zip`);
        })
      }
    })
  
  
  }
  
  </code></pre>