Cancel a download programatically

[hrishikesh-k]

Hello all,

My situation is quite similar to: #149

I'm developing a Vue.js based application. I'm using fetch to fetch files from an API, converting them to blob with response.blob(), adding them to a zip using fflate and piping that zip to StreamSaver. I'm doing this with a recursive function and doing this for 1 file at the moment. Here's my code:

downloadAll(init) {
  if (init) {
    this.downloading = true
    const zip = this.$options.static.zip = new Zip()
    this.$options.static.zipReadableStream = new ReadableStream({
      cancel() {
        zip.terminate()
      },
      start(controller) {
        zip.ondata = (error, data, final) => {
          if (error) {
            controller.error(error)
          } else {
            controller.enqueue(data)
            if (final) {
              controller.close()
            }
          }
        }
      }
    })
    this.$options.static.zipReadableStream.pipeTo(streamSaver.createWriteStream(`deploy-${this.chosenDeploy}.zip`, {
      size: this.userFileSize
    }), {
      signal: this.$options.static.downloadStop.signal
    })
  }
  this.callApi(`deploys/${this.chosenDeploy}/files${this.userFiles[this.downloaded].path}`, true).then(file => {
    (async () => {
      const zippedFileStream = new ZipPassThrough(`deploy-${this.chosenDeploy}${this.userFiles[this.downloaded].path}`)
      this.$options.static.zip.add(zippedFileStream)
      const fileReader = file.stream().getReader()
      while (true) {
        const {done, value} = await fileReader.read()
        if (done) {
          zippedFileStream.push(new Uint8Array(0), true)
          break
        }
        zippedFileStream.push(value)
      }
    })().then(() => {
      this.downloaded++
      if (this.downloaded < this.userFiles.length) {
        this.downloadAll()
      } else {
        this.$options.static.zip.end()
      }
    })
  })
}

I simply want to add an option to cancel the download. So, I've create an AbortController (referenced as this.$options.static.downloadStop). I've attached the same signal to the fetch requests in my callApi() method. As soon as I call this.$options.static.downloadStop.abort(), the fetch request gets cancelled, but the download with StreamSaver doesn't stop. So, I'm trying to run this.$options.static.zipReadableStream.cancel() but that still doesn't work and throws this error in the console: Failed to execute 'cancel' on 'ReadableStream': Cannot cancel a locked stream.

Thus, the question is, how do I terminate this download? I'm quite lost here, any help would be great!

Here's my repo if it helps (/src/App.js is the relevant file): https://github.com/Hrishikesh-K/netlify-file-browser/tree/vite (Check the vite branch).

[hrishikesh-k]

Nevermind, I switched to Vuex store and it magically works now. I still get the error as mentioned, but at least the download gets cancelled.

If anyone has any suggestions, I'm still open to ideas.