[Vuejs]-Downloading storage file using vue3 and Laravel

by

0👍

You’re returning data from the server as JSON:

return response()->json([
    'files'=> $files, 
    'image'=> $image,     
], 200);

JSON is a text format. This is why your front-end is receiving text.

Your front-end code creates a link to a local copy of the JSON its just received, then creates an anchor tag, points the anchor tag at this link and programmatically clicks it (all redundant steps):

const url = window.URL.createObjectURL(new Blob([response.data])); // Create link to local copy of JSON
const link = document.createElement('a'); // Create anchor tag
link.href = url; // set href of anchor tag to link created to local copy of JSON
link.setAttribute('download', response.data.file_name); // Set redundant attribute - never used
document.body.appendChild(link); // Append anchor tag to body
link.click(); // Programmatically click link

You should use return Storage::download('uploads',$image_name); instead.

Leave a comment