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.