Blog

Laravel 11 Multiple File Upload Example | websolutioncode.com
Laravel 11 Multiple File Upload Example | websolutioncode.com

Laravel 11 Multiple File Upload Example

Introduction:

Laravel, renowned for its graceful syntax, comprehensive features, and thriving community, stands as a prominent PHP framework. Among the myriad tasks in web development, managing file uploads holds significant importance, a task streamlined by Laravel’s formidable capabilities. This tutorial aims to guide you through the seamless implementation of multiple file uploads in Laravel 11, offering lucid explanations and illustrative code snippets throughout the journey.

Prerequisites: Before we begin, ensure you have the following prerequisites installed on your system:

Step 1: Set Up a Laravel Project If you haven’t already set up a Laravel project, you can do so by running the following command:

composer create-project --prefer-dist laravel/laravel multiple-file-upload-example

Step 2:

Create a File Upload Form Next, let’s create a form where users can upload multiple files. Open your preferred code editor and navigate to the resources/views directory. Create a new file named upload.blade.php and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple File Upload</title>
</head>
<body>
    <form action="{{ route('upload') }}" method="post" enctype="multipart/form-data">
        @csrf
        <input type="file" name="files[]" multiple>
        <button type="submit">Upload Files</button>
    </form>
</body>
</html>

Step 3:

Create a Route Now, let’s define a route that will handle the file upload request. Open the routes/web.php file and add the following route definition:

use App\Http\Controllers\FileUploadController;

Route::get('/upload', [FileUploadController::class, 'showUploadForm'])->name('upload.form');
Route::post('/upload', [FileUploadController::class, 'upload'])->name('upload');

Step 4:

Implement the File Upload Logic Create a new controller named FileUploadController by running the following command in your terminal:

php artisan make:controller FileUploadController

Then, open the FileUploadController.php file located in the app/Http/Controllers directory and implement the following methods:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileUploadController extends Controller
{
    public function showUploadForm()
    {
        return view('upload');
    }

    public function upload(Request $request)
    {
        $request->validate([
            'files.*' => 'required|file|mimes:jpg,jpeg,png,pdf|max:2048'
        ]);

        foreach ($request->file('files') as $file) {
            $fileName = time() . '_' . $file->getClientOriginalName();
            $file->storeAs('uploads', $fileName);
        }

        return redirect()->back()->with('success', 'Files uploaded successfully.');
    }
}

Step 5:

Display Success Message (Optional) To display a success message after uploading files, update your upload.blade.php file as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple File Upload</title>
</head>
<body>
    @if(session('success'))
        <div>{{ session('success') }}</div>
    @endif

    <form action="{{ route('upload') }}" method="post" enctype="multipart/form-data">
        @csrf
        <input type="file" name="files[]" multiple>
        <button type="submit">Upload Files</button>
    </form>
</body>
</html>

Step 6:

Test the Application Now, you can test the multiple file upload functionality by navigating to http://localhost:8000/upload in your web browser. Choose multiple files using the file input field and click the “Upload Files” button. Upon successful upload, you should see a success message displayed on the page.

Conclusion:

In this tutorial, we’ve covered how to implement multiple file uploads in Laravel 11. By following these steps, you can easily integrate file upload functionality into your Laravel applications, allowing users to upload multiple files with ease. Laravel’s intuitive syntax and powerful features make handling file uploads a breeze, providing a seamless experience for both developers and users alike.

Tags:

Leave a Reply