Download A File In Laravel Vue From Storage Folder - FreeCodeBlog

Last updated: Dec 03, 2021

Want to download a file from storage folder in laravel with vue js? Yes! Okay don't worry you can easily make a download file from storage folder system in laravel vue. To download a file in laravel vue I will use laravel, laravel ui and vue. Also I will use laravel public storage for this tutorial. You can use download a file from storage folder source code in your laravel project. I will shared this tutorial source code on my GitHub project. So don't worry just start to reading this tutorial. After reading this you may see source code on my GitHub profile.

 

Download A File In Laravel Vue From Storage Folder
Download A File In Laravel Vue From Storage Folder

 

1. Upload File.

Want to download a file? Do you know how to upload a file on laravel vue? Don't know. Actually in this tutorial I will not explain you how we can upload a file using laravel and vue. I just explain you that how we can download a file from laravel storage folder in laravel vue. So you need to know how to upload a file on laravel vue to better understand this download a file in laravel vue. If you don't know to upload a file in laravel vue then before continue download file tutorial read how to upload file on laravel vue tutorial.

 

2. Storage Folder.

Do you know where did you upload a file in laravel storage folder? You don't know! To continue downloading a file in laravel vue you must know the location of the uploaded file. Make sure your uploaded file is stored in the Laravel Public Storage folder. Because in this tutorial I will explain about laravel storage folder to download a file in laravel vue. So if you can't find the file path on laravel public storage folder that you uploaded then don't forget to find the uploaded file path before follow next steps. The uploaded image file path should be like below if you uploaded a image into “image” folder of laravel “public” disk storage. Need source code for download a file in laravel vue from storage folder tutorial? You will find the source code for this tutorial on my GitHub repository.

 

your-project>storage>app>public>image>your-image-name.image-extenstion

 

3. Storage Link.

Want to access uploaded file from public folder? Yes!. You may not access the uploaded file from storage folder directly. So you need to link laravel storage folder to public folder using artisan command. Don't forgot to link storage folder to public folder. You can see uploaded image file into public folder like below if you didn't change the filesystem links.

 

php artisan storage:link
your-project>public>storage>image>image-name.image-extention

 

4. Vue File.

I hope you know the basic of vue js. Now come to the main point. You need to make a vue file that there you can write vue code to download a file in laravel vue. You make the vue file like file.vue. In vue file template section, you need to make a click method with HTML button tag. In click method you need to send the file that you want to download. The file can be image.png.

 

<button @click="download('image.png')">Download</button>

 

Now you need to implements download method in vue file's script section so that you can send a request to controller to download a file from storage folder. I will use axios request in this tutorial. You can use vform to send a request to controller. I will send API request to download a file. Don't forget to use response type blob to send get request.

 

download(image){
 axios.get("/api/download?image=" + image, {responseType: 'blob'})
                .then(response => {
                   const url = window.URL.createObjectURL(new Blob([response.data]));
                  const link = document.createElement('a');
                  link.href = url;
                  link.setAttribute('download', image);
                  document.body.appendChild(link);
                  link.click();
                })
                .catch(e => {
                console.log(e);
                });
            },

 

5. Controller.

You should know to use laravel controller before reading this tutorial. I hope you know how to use controller in laravel to make any project. You must return the requested file from the controller that you sent from the vue file. In this tutorial I used laravel illuminate storage facades to return file from storage folder. So you need to use this storage facades file on top of the controller. Also don't forget to use request on top of the controller.

 

use Illuminate\Support\Facades\Storage;
public function download(Request $request)
    {
 return Storage::download('public/image/'.$request->image);
    }

 

6. Try To Download A File.

I hope image will be download after click on download button. If it doesn't work then you should revise this tutorial once again or follow my GitHub repository to use source code of download a file in laravel vue. If it's works then you can see a popup window to save a file after click on download button.

 

7. Laravel 8 Jetstream Vue 3.

Yes, You can also make a file download system using laravel 8 jetstream vue 3. Can't believe it? No! Okay then you should need to read laravel 8 jetstream vue 3 file download example tutorial.

 

Okay so this is for today. See you again next tutorials. Thanks

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
Build Comment And Reply System Using Only Comment Table In Laravel

Today I will explain, how we can create a multilevel nested comment and reply system in laravel using only comment table. No need to create reply m... Read More

How To Slove Low Value Content Error In Google Adsense For Your Website

Have you applied your website to Google AdSense to monetize your website and received low value content errors? Actually you need to fix some thing... Read More

Solve Ckeditor 5 Code Block Plugin Not Working In Laravel

Ckeditor 5 code block plugin not working in laravel? No. Do you have a programming laravel project and want to use code block ckeditor 5 plugin in... Read More

How To Connect Database Connection In Laravel

You must need to connect database connection in laravel for making dynamic laravel website. hello guys, I will explain you how we can connect larav... Read More

Make Login With Google In Laravel For User Registration Using Laravel Socialite

Read this post carefully if you want to make login with google in laravel for user registration using laravel first party package (laravel socialit... Read More