Laravel 10 Multiple Image Upload Tutorial Example

Laravel 10, With multiple image upload, users can select and upload multiple images simultaneously, saving time and effort compared to uploading them one by one. It improves efficiency, especially when dealing with bulk image uploads.

Step 1: Install Laravel App

composer create-project laravel/laravel example- MultipleImageUpload

Step 2: Create Migration and Model

php artisan make:migration create_images_table

database/migrations/2022_02_10_140040_create_images_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.
         *
         * @return void
         */
        public function up()
        {
            Schema::create('images', function (Blueprint $table) {
                $table->id();
                $table->string('name');
                $table->timestamps();
            });
        }
      
        /**
         * Reverse the migrations.
         *
         * @return void
         */
        public function down()
        {
            Schema::dropIfExists('images');
        }
    };

Run new migration 

php artisan migrate

CreateImage model

php artisan make:model Image

app/Models/Image.php

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

Step 3: Create Controller

php artisan make:controller ImageController

app/Http/Controllers/ImageController.php

<?php
    
    namespace App\Http\Controllers;
        
    use Illuminate\Http\Request;
    use App\Models\Image;
    use Illuminate\View\View;
    use Illuminate\Http\RedirectResponse;
        
    class ImageController extends Controller
    {
        /**
         * Display a listing of the resource.
         *
         * @return \Illuminate\Http\Response
         */
        public function index(): View
        {
            return view('imageUpload');
        }
            
        /**
         * Display a listing of the resource.
         *
         * @return \Illuminate\Http\Response
         */
        public function store(Request $request): RedirectResponse
        {
            $request->validate([
                'images' => 'required',
                'images.*' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
            ]);
            
            $images = [];
            if ($request->images){
                foreach($request->images as $key => $image)
                {
                    $imageName = time().rand(1,99).'.'.$image->extension();  
                    $image->move(public_path('images'), $imageName);
      
                    $images[]['name'] = $imageName;
                }
            }
        
            foreach ($images as $key => $image) {
                Image::create($image);
            }
            
            return back()
                    ->with('success','You have successfully upload image.')
                    ->with('images', $images); 
        }
    }

Store Images in Storage Folder

$image->storeAs('images', $imageName);
// storage/app/images/file.png

Store Images in Public Folder

$image->move(public_path('images'), $imageName);
// public/images/file.png

Store Images in S3

$image->storeAs('images', $imageName, 's3');

Step 4: Create and Add Routes

routes/web.php 

<?php
  
    use Illuminate\Support\Facades\Route;
      
    use App\Http\Controllers\ImageController;
      
    /* 
    |--------------------------------------------------------------------------
    | Web Routes
    |--------------------------------------------------------------------------
    |
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider within a group which
    | contains the "web" middleware group. Now create something great!
    |
    */
      
    Route::controller(ImageController::class)->group(function(){
        Route::get('image-upload', 'index');
        Route::post('image-upload', 'store')->name('image.store');
    });

Step 5: Create Blade File

resources/views/imageUpload.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Multiple Image Upload Example - webthestuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
      
<body>
<div class="container">
       
    <div class="panel panel-primary">
  
      <div class="panel-heading">
        <h2>Laravel 10 Multiple Image Upload Example - webthestuff.com</h2>
      </div>
  
      <div class="panel-body">
       
        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              <strong>{{ $message }}</strong>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
  
            @foreach(Session::get('images') as $image)
                <img src="images/{{ $image['name'] }}" width="300px">
            @endforeach
        @endif
      
        <form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
  
            <div class="mb-3">
                <label class="form-label" for="inputImage">Select Images:</label>
                <input 
                    type="file" 
                    name="images[]" 
                    id="inputImage"
                    multiple 
                    class="form-control @error('images') is-invalid @enderror">
  
                @error('images')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
   
            <div class="mb-3">
                <button type="submit" class="btn btn-success">Upload</button>
            </div>
       
        </form>
      
      </div>
    </div>
</div>
</body>
    
</html>

Run Laravel App:

php artisan serve

Now, Go to web browser, type the given URL and see the output:

http://localhost:8000/image-upload