1

I am working on an app in Vue.js 2. I am using a v-for with a Vuetify v-btn component to call a method called downloadFile.

<template v-for="item in items">
  <v-btn @click="downloadFile(item)" v-bind:key="item.filename" small icon>
    <v-icon>mdi-folder-download</v-icon>
  </v-btn>
</template>

The downloadFile method then opens a dialogue for the user to download the file. For this, I'm using a method described here that works for me (I also plan to add a step where the file is generated before downloading).

methods: {
  downloadFile(item) {
    let link = document.createElement('a')
    link.href = `https://localhost:5000/static/${item.filename}`
    link.download = `${item.filename}`
    link.click()
  }
}

This works fine in the sense that it prompts user to select a destination to download the file to.

The problem:

However, I would like to do some action based on whether the user really clicks the download button or cancels the download, i.e., the code could look something like this

methods: {
  downloadFile(item) {
    let link = document.createElement('a')
    link.href = `https://localhost:5000/static/${item.filename}`
    link.download = `${item.filename}`
    link.click()

    if (file_downloaded) {
      this.$set(item, 'downloaded', true)
      this.$set(item, 'filepath', path_selected_by_user)
    }
  }
}

This would then trigger the UI update, e.g. check some checkbox and show the filepath somewhere.

The questions:

  • Is there some way I get to know whether the user really downloads the file or cancels the download?
  • Is there a way to get the location to which the user downloads the file?

Edit:

It was suggested to me to check this thread. This thread does not solve my problem, as the problem there is to show some sort of a waiting screen while the file is generated on the server and then hide it when the download dialogue is open.

My problem is that once the download dialogue is open, I want to know whether the user clicks Save or Cancel, and if they click Save, what the path they've chosen is.

Vaclav Pelc
  • 366
  • 1
  • 11

0 Answers0