Laravel 11 File Upload Example Tutorial

In this tutorial, we will explore how to handle file uploads in a Laravel 11 application. This guide covers everything from setting up the project to handling the file upload process and storing the uploaded files. We’ll also show how to display the uploaded files.

We will create two routes: one for rendering the form using a GET request and another for handling the file upload using a POST request. The uploaded file will be stored in the uploads directory within the public folder. Follow these steps to implement file uploads in your Laravel 11 application.

Step 1 : Install Laravel 11

First, ensure you have Laravel installed. If not, you can create a new Laravel application using the following command :

				
					composer create-project laravel/laravel example-app

Step 2 : Create a Controller

Next, we will create a FileController to handle the file upload logic. This controller will have two methods: index to render the upload form and store to handle the file upload.

Create the controller using the artisan command:

				
					php artisan make:controller FileController

Now, update the FileController with the following code :

				
					<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;

class FileController extends Controller
{
    /**
     * Display the upload form.
     *
     * @return View
     */
    public function index(): View
    {
        return view('fileUpload');
    }

    /**
     * Handle the file upload.
     *
     * @param  Request  $request
     * @return RedirectResponse
     */
    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'file' => 'required|mimes:pdf,xlsx,csv|max:2048',
        ]);

        $fileName = time().'.'.$request->file->extension();  

        $request->file->move(public_path('uploads'), $fileName);

        /*  
            Write Code Here for
            Store $fileName in DATABASE 
        */

        return back()
            ->with('success', 'You have successfully uploaded the file.')
            ->with('file', $fileName);
    }
}

Step 3 : Create and Add Routes

Now, we need to create routes to display the form and handle the file upload. Open the routes/web.php file and add the following routes:

				
					<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileController;

Route::get('file-upload', [FileController::class, 'index']);
Route::post('file-upload', [FileController::class, 'store'])->name('file.store');

Step 3 : Create and Add Routes

Now, we need to create routes to display the form and handle the file upload. Open the routes/web.php file and add the following routes:

				
					<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileController;

Route::get('file-upload', [FileController::class, 'index']);
Route::post('file-upload', [FileController::class, 'store'])->name('file.store');

Step 4 : Create the Blade File

Create a Blade view to display the file upload form.
In the resources/views directory, create a new file named fileUpload.blade.php and add the following code :

				
					<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 File Upload Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <div class="card">
        <div class="card-header">
            <h2>Laravel 11 File Upload Example</h2>
        </div>
        <div class="card-body">
            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <strong>{{ $message }}</strong>
                </div>
            @endif
            <form action="{{ route('file.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mb-3">
                    <label for="file" class="form-label">File:</label>
                    <input type="file" name="file" id="file" class="form-control @error('file') is-invalid @enderror">
                    @error('file')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-3">
                    <button type="submit" class="btn btn-primary">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

Step 5 : Run the Laravel Application

Finally, run your Laravel application using the following command :

				
					php artisan serve

Open your browser and navigate to http://localhost:8000/file-upload. You should see the file upload form. Select a file and click “Upload” to test the file upload functionality.

Conclusion :

This tutorial walked you through the steps to handle file uploads in a Laravel 11 application. We covered setting up the project, creating a controller, adding routes, and creating a Blade view for the upload form. By following these steps, you can implement file uploads in your Laravel application and handle file storage efficiently.

Laravel 11 File Upload Example Tutorial

Laravel 11 File Upload Example Tutorial