Laravel 11 Multiple File Upload Example

In this tutorial, we will learn laravel 11 multiple file upload example step by step.

In this example, we'll create a "files" table with a "name" column. Then, we'll design a simple web page where users can select multiple files to upload. We'll save these files both to the "uploads" folder and the database.

Step for Laravel 11 Multiple File Upload Example

• Step 1: Install Laravel 11
• Step 2: Create Migration and Model
• Step 3: Create Controller
• Step 4: Create Routes
• Step 5: Create Blade File
• Run Laravel App

So, let's follow the below step to create multiple file uploads in the Laravel 11 application example.

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Migration and Model

Here, we will create a migration for the "files" table. Let's run the below command and update the code.

php artisan make:migration create_files_table

database/migrations/2024_03_14_032608_create_files_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('files', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('files');
    }
};

Next, run create new migration using Laravel migration command as follows:

php artisan migrate

Now we will create a File model by using the following command:

php artisan make:model File

app/Models/File.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class File extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name'
    ];
}

Step 3: Create Controller

In this step, we will create a new `FileController`. In this file, we will add two methods: `index()` and `store()`, to render views and store files into folders and database logic.

Let's create the `FileController` by following this command:

php artisan make:controller FileController

Next, let's update the following code to the Controller file.

app/Http/Controllers/FileController.php

<?php
  
namespace App\Http\Controllers;
       
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use App\Models\File;
      
class FileController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(): View
    {
        return view('fileUpload');
    }
       
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request): RedirectResponse
    {
        // Validate incoming request data
        $request->validate([
            'files' => 'required|array',
            'files.*' => 'required|mimes:pdf,xlx,csv|max:2048',
        ]);
 
        // Initialize an array to store file information
        $files = [];
  
        // Process each uploaded file
        foreach($request->file('files') as $file) {
            // Generate a unique name for the file
            $fileName = time() . '_' . uniqid() . '.' . $file->getClientOriginalExtension();
              
            // Move the file to the desired location
            $file->move(public_path('uploads'), $fileName);
  
            // Add file information to the array
            $files[] = ['name' => $fileName];
        }
  
        // Store files in the database using create method
        foreach ($files as $fileData) {
            File::create($fileData);
        }
          
        return back()->with('success', 'Files uploaded successfully!')
                     ->with('files', $files); 
   
    }
}

Store Files in Storage Folder

$file->storeAs('files', $fileName);
  
// storage/app/files/file.png

Store Files in Public Folder

$file->move(public_path('files'), $fileName);
  
// public/files/file.png

Store Files in S3

$file->storeAs('files', $fileName, 's3');

Step 4: Create Routes

Furthermore, open the `routes/web.php` file and add the routes to manage GET and POST requests for rendering views and storing file logic.

routes/web.php

<?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 5: Create Blade File

At the last step, we need to create a `fileUpload.blade.php` file. In this file, we will create a form with a file input button. Please copy the following code and paste it into that file.

resources/views/fileUpload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Multiple File Upload Example - ItSolutionStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
        
<body>
<div class="container">
  
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Multiple File Upload Example - ItSolutionStuff.com</h3>
        <div class="card-body">
  
            @session('success')
                <div class="alert alert-success" role="alert"> 
                    {{ $value }}
                </div>
            @endsession
            
            <form action="{{ route('file.store') }}" method="POST" enctype="multipart/form-data" class="mt-2">
                @csrf
        
                <div class="mb-3">
                    <label class="form-label" for="inputFile">Select Files:</label>
                    <input 
                        type="file" 
                        name="files[]" 
                        id="inputFile"
                        multiple 
                        class="form-control @error('files') is-invalid @enderror">
        
                    @error('files')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
         
                <div class="mb-3">
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
                </div>
             
            </form>
        </div>
    </div>
</div>
</body>
      
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/file-upload

Output:

I hope it can help you...