[Solved] File download suppressed?

[rconstantine]

Not sure whether this is caused by Quasar or something else. I’m hoping someone has seen something like this before.

I have an Express server app which accepts in a POST request a file path. That path is used in a return res.download(path) statement. This works just fine in Postman. Postman gives me a message stating it can’t show the returned file, but I can download it. Using the drop down provided in the app works and I’m able to download it.

However, when I make the same call in my Quasar app (in Chrome) I see the file come across in the Network tab of the DevTools pane, but the file doesn’t seem to go anywhere. It isn’t downloaded to the downloads folder, nor does it show on the downloads list.

Maybe it isn’t a Quasar thing, but I’m at a loss as to know why my file lands nowhere. It’s only 23KB, if that matters. I would have expected to see the browser’s bottom band show up with the name of the file.

[Max]

just an idea, i used this to download a file (item.download is the download url)

      downloadItem () {
        window.location = this.item.download
      },

[minimalicious]

@rconstantine do you have the right content type for the file being downloaded? like “application/pdf” for a PDF file

Maybe write a simple html file to test outside of your app if your api works correctly.
Basic script using fetch to just make the post and see what it returns outside of quasar.
That way you know the API is ok or not.

[rconstantine]

What ended up working was sending in the request the response type of blob, then in the .then block, I did this:

const blob = new Blob([res.data], { type: res.data.type })
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = url
          console.log('headers', res.headers)
          const contentDisposition = res.headers['content-disposition']
          let fileName = 'unknown'
          if (contentDisposition) {
            const fileNameMatch = contentDisposition.match(/filename="(.+)"/)
            if (fileNameMatch.length === 2) {
              fileName = fileNameMatch[1]
            }
          }
          // let fileName = payload.reportName
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          link.remove()
          window.URL.revokeObjectURL(url)

[amoss]

I encountered the same problem as you and I couldn’t understand what am I doing wrong, after doing EVERYTHING I read on the internet. Unless the master people here know differently, the only explanation I have is that quasar somehow suppresses the download.
Eventually I used your solution and my sanity came back (the hair I lost a long time ago so I couldn’t pull it out)… Thanks.

Last but not least, why quasar behaves like that?