Laravel 8 Jetstream Vue 3 File Download Example - FreeCodeBlog

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.

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