How to Download a File from the Server Using Laravel and React

In this tutorial, we will see how to download a file from the server using Laravel and React. Let's assume that we store images in the backend using Laravel and we want to download the images in the frontend using React.

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 project, 'Download. jsx '. Inside, we have the function for downloading the image once the user clicks the button the image is downloaded and saved on the user's 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>
    )
}