Laravel 8 Jetstream Vue 3 File Download Example - FreeCodeBlog

Last updated: Jul 04, 2022

Are you using laravel 8 jetstream vue 3 to download a file? Yes. Well, want to make a file download system in laravel 8 with jetstream vue 3? Yes. Don't worry friends, in this tutorial I will explain all so that you can create a file download system for your laravel 8 vue 3 jetstream project. May be I will use web route, API route, controller, vue 3 file to make a file download example in laravel 8 jetstream. Want to source code for Laravel 8 jetstream vue 3 file download example tutorial? Yes. Well I will shared file download example tutorial source code on my GitHub project. So after reading jetstream file download tutorial you may see source code on my GitHub profile.

 

Laravel 8 Jetstream Vue 3 File Download Example
Laravel 8 Jetstream Vue 3 File Download Example

 

1. Laravel 8 Jetstream.

Wait a minute, have you installed laravel jetstream vue version to create an example of a file download? May be not. Listen friends, In this tutorial I will make a file download system using laravel 8 jetstream inertia vue. So it's very important to install jetstream vue 3 version in laravel 8. Don't know how to install jetstream vue 3 version in laravel 8? No. Okay don't worry, I have a install laravel jetstream user authentication first party package tutorial that will help you to install vue jetstream in laravel 8.

 

2. Laravel 8 Web Controller.

Let's make a file download controller. I hope you know about laravel 8 controller. You need to run make controller command to create laravel 8 web controller.

 

php artisan make:controller FileDownloadController

 

Now you need to use this created File Download Controller in web route. Don't forget to use File Download Controller on top of the web route.

 

use App\Http\Controllers\FileDownloadController;

 

You need to create a file download web route in laravel 8. File download route should be get route.

 

Route::get('/file-download', [FileDownloadController::class, 'filedownload']);

 

Now it's time to use jetstream Inertia in web File Download Controller.

 

use Inertia\Inertia;

 

Now it's time to return jetstream Inertia vue file from web File Download Controller.

 

public function filedownload()
    {
 return Inertia::render('FileDownload');
    }

 

3. Laravel 8 Api Controller.

Have you configured the web controller to make file download example? Yes. Okay now it's time to configuration laravel 8 API controller to make file download system using jetstream vue 3.

 

php artisan make:controller Api\FileDownloadController

 

Now you need to use laravel 8 created API controller in API route so that you can make file download API. Use it top of the API route.

 

use App\Http\Controllers\Api\FileDownloadController;

 

Now you need to make a file download API route in laravel 8. Actually you need to make File download get route.

 

Route::get('/file-download', [FileDownloadController::class, 'filedownload']);

 

Now it's time to use storage facades in API File Download Controller.

 

use Illuminate\Support\Facades\Storage;

 

Next you need to make a File Download method in API controller that you make before.

 

 public function filedownload(Request $request)
    {
        if (Storage::disk('public')->exists('filedownload/'.$request->file)) {
            return Storage::download('public/filedownload/'.$request->file);
        }else{
            return redirect()->back();
        }
    }

 

4. Jetstream Inertia Vue 3 File.

Have you completed the API and web configuration to download a file? Yes! Good. Now you need to make a vue file in pages folder.

 

FileDownload.vue

 

Now use a button with download method in template section of “FileDownload.vue” file.

 

<button @click="download(file)">Download</button>

 

Next use a download method in script section of “FileDownload.vue” file.

 

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

 

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
Laravel 8 Email Notification Send To User When User Email Verified

In this tutorial we can learn how we can send a email when a user verified her email. We need to send email because email verified success email im... Read More

Add Stripe Payment Method In Laravel 8 Ecommerce Website

Well, In this tutorial I will add stripe payment method in laravel 8 ecommerce website using laravel first party cashier package. you can receive m... Read More

Use Laravel Sanctum To Make Laravel Api Authentication For Users

In this tutorial I will use laravel sanctum package to make laravel api authentication for users. For spa authentication or laravel vue api authent... Read More

Laravel Ui Package Setup In Laravel 8 With Vue 3

Want to use vue 3 in laravel ui? Laravel ui is a first party user authentication package and you can easily use it with laravel 8 and vue 3. So let... Read More

Make Laravel User Authentication Using Laravel Ui In Laravel 8 With Vue 2

Install and use laravel ui package in laravel 8 with Vue 2 to make user authentication. Laravel UI is a new first-party package that extracts the U... Read More