Melodia
5 months ago
904
1
Vue

How can I download a file in laravel and vuejs

Posted 5 months ago by Melodia

I initially created a route that allows a user to download a specific file, which works perfectly fine.

Route::get('project/{project}/download', '[email protected]'); 

public function downloadFile(Project $project){
    return response()->download(public_path() . "/upload/WhatsApp Image 2019-10-31 at 19.57.15.jpeg");
}

When I hit the url, the download happens.

How can I do the same via vuejs?

I tried using that end point inside the component but it doesn't download the file.

The component looks like this:

<template>
    <button @click="download" class="btn btn-primary">Download file</button>
</template>

<script>
    export default {
        methods: {
            download(){
            axios({
                    url: '/project/1/download',
                    method: 'GET',
                    responseType: 'blob',
                })
                .then((res) => console.log(res.data))
                .catch(err => console.log(err))
            }
        }
    }
</script>

When I hit the download button, I see the following in the console

BlobĀ {size: 73561, type: "image/jpeg"}

and file does not download.

How can I download a file using laravel and vuejs?

Please sign in or create an account to participate in this conversation.