How to Upload Multiple Images in Laravel 10

Hello developers! Today, I'll guide you through the process of uploading multiple images in Laravel 10. This is a common requirement for many web applications, especially those dealing with galleries, product images, or social media platforms.

And furthermore, we will validate image MIME type, size, dimensions, etc., in Laravel 10 using Laravel's validation rules.

So, let's see how to upload multiple images in laravel 10, laravel 10 uploads multiple images, how to add multiple images in laravel 8/9/10, and how to upload an image in laravel 10.

First things first, ensure you have Laravel 10 installed on your system. If not, you can quickly set it up using Composer:

composer create-project --prefer-dist laravel/laravel:^10.0 multiple-image-upload

Navigate to your project directory:

cd multiple-image-upload

 

Now, we will create a database, model, and migration for multiple image uploads.

php artisan make:model Image -m

Next, we will update the Image model with the following code.

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'
    ];

}

Now, add the below code in the migration file.

<?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');
    }
};

 Now, run migration using the following command.

php artisan migrate

 

Now, let's create a controller to handle our image upload logic. Run the following Artisan command to generate a controller:

php artisan make:controller ImageUploadController

Then, open up app/Http/Controllers/ImageUploadController.php. and don't forget to create an "images" folder in your public directory to save your images.

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Image;
  
class ImageUploadController extends Controller
{
    public function create()
    {
        return view('index');
    }
  
    public function store(Request $request)
    {
        $request->validate([
            'images' => 'required',
            'images.*' => 'required|image|mimes:jpeg,png,jpg,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','Successfully Uploaded Images')->with('images', $images);
    }
}

 

Next, we need to define a route that corresponds to our form action. Open up routes/web.php and define a route for handling image uploads:

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageUploadController;
  
/* 
|--------------------------------------------------------------------------
| 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(ImageUploadController::class)->group(function(){
    Route::get('image-upload', 'create');
    Route::post('image-upload', 'store')->name('image.store');
});

 

Now, we'll create an index.blade.php file.

resources/views/index.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>How to Upload Multiple Images in Laravel 10 - Vidvatek</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>      
    <body>
        <div class="container">   
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h2>How to Upload Multiple Images in Laravel 10 - Vidvatek</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>

 

---

You might also like:

• Read Also: How to File Upload in Laravel 10: A Step-by-Step Guide
• Read Also: How to Import Excel File into Database using Python
• Read Also: How To Export CSV File In Laravel 10 Example
• Read Also: How to Create Autocomplete Search in Vue JS

---