How to Download a File from the Server Using Laravel and React js
3 months ago
admin
Reactjs
In this tutorial, we will see how to download a file from the server using Laravel and React js, let's assume that we store images in the backend using Laravel and we want to download the images in the frontend using React js.
Create the controller
In the backend create the 'UploadController' Inside we add the function that downloads the image using the file path field.
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use App\Models\Picture;
use Illuminate\Http\Request;
class UploadController extends Controller
{
/**
* Download the picture from the storage
*/
public function downloadPicture(Picture $picture)
{
return response()->download($picture->file_path);
}
}
Add routes
Next, let's add the route:
Route::get('download/picture/{picture}', [UploadController::class, 'downloadPicture']);
Create the download component
Create a new component inside your react js project 'Download.jsx' inside we have the function for downloading the image once the user clicks the button the image is downloaded and saved inside his device.
import axios from 'axios'
import React from 'react'
export default function Download() {
const downloadPicture = async () => {
try {
const response = await axios.get(`http://127.0.0.1:8000/api/download/picture/1`,
{
headers: {
"Content-Type": "image/png"
},
responseType: 'blob'
})
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', "downloaded_image.png")
document.body.appendChild(link)
link.click()
//clean the dom
document.body.removeChild(link)
URL.revokeObjectURL(url)
} catch (error) {
console.log(error)
}
}
return (
<div className='container'>
<div className="row my-5">
<div className="col-md-6 mx-auto">
<div className="card">
<div className="card-header bg-white">
<h4 className="text-center mt-2">
Download Picture
</h4>
</div>
<div className="card-body">
<button className="btn btn-primary"
onClick={() => downloadPicture()}
>
Download
</button>
</div>
</div>
</div>
</div>
</div>
)
}