vue client file direct download from node js server doesnt work

Question

Alright, so I've been trying for 2 days now to send an audio file as a direct download in the browser from a node js backend (port 8081) to a vue js client frontend (port 8080) on http request (using axios).

There are some topics on this in stack overflow but none of them fixed my problem, I probably made an error somewhere but I just can't seem to see where exactly.

My browser/client receives the response but doesnt translate this to a direct download, here's how it looks:

{data: "ID3#TSSELavf57.71.100���…UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU", status: 200, statusText: "OK", headers: {…}, config: {…}, …} config: {url: "http://localhost:8081/api/tracks/download/5df305bc6cea85c8eac5d3e6", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …} data: "ID3#TSSELavf57.71.100���..." headers: {cache-control: "public, max-age=0", content-length: "9775064", content-type: "audio/mpeg", last-modified: "Fri, 13 Dec 2019 03:30:04 GMT"} request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …} status: 200 statusText: "OK" __proto__: Object

Do i need to setup a proxy, i'm not sure I quite understand how to do this correctly ? I've really been trying hard to get it to work lol

Here are the codes:

node.js server download route

router.get('/download/:id', async (req, res) => { const tracks = await loadTracksCollection(); var id = new mongodb.ObjectID(req.params.id); var track = await tracks.findOne({ _id: id }); var trackPath = String(track.path); var trackName = String(track.user + ' - ' + track.name + '.mp3'); res.download(trackPath, trackName, (err) => { if (err) { console.error(err); return ; } else { tracks.updateOne({ _id: id }, { $inc: { downloadCount: 1 } }); // return res.status(200).send('The download should start ...') } }); });

vue.js button component

<template> <v-btn @click="download" depressed block color="accent"><unicon name="import" fill="white" /></v-btn> </template> <script> import axios from 'axios' export default { props: { fileId: { required: true, type: String } }, methods: { download() { axios.get(process.env.VUE_APP_AUDIO_API_URL + '/api/tracks/download/' + this.fileId) .then(response => { console.log(response) }) .catch(error => { console.error(error) }) } } } </script>

let me know if anymore code is needed !

Thanks a lot !

Oscar Fally · Accepted Answer · 2019-12-18 21:55:24Z

Alright, seems like a complex subject, but I found my solution tho here you go:

 this.$axios({ method: 'GET', url: // ur backend api url, responseType: 'arraybuffer' }) .then(response => { var blob = new Blob([response.data], {type: response.headers['content-type']}) var link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = // name the downloaded file link.click() }) .catch(error => { // whatever }) .finally(() => { // whatever }

Carol Skelly · Accepted Answer · 2019-12-13 15:37:30Z

You need to change the responseType in axios...

axios({ method: 'GET', url: process.env.VUE_APP_AUDIO_API_URL + '/api/tracks/download/' + this.fileId, responseType: 'arraybuffer' }).then(response => { console.log(response.data) }).catch(error => { console.error(error) })

Hi, thanks for answering me ! Just tried this and the dev tools now console this: ArrayBuffer(440651) {} ... (with a bunch of int arrays) but no direct download happening

Collectives™ on Stack Overflow

vue client file direct download from node js server doesnt work

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related