Laravel 10 Multiple Image Upload With Preview

In this article, we will see laravel 10 multiple image uploads with a preview. Here, we will learn about how to upload multiple images in laravel 10 and laravel 11. Also, we will validate image size and image type validation in laravel 10 and laravel 11. Also, we will create a model and migration for the multiple image upload

For multiple image uploads, we will create migration and model to store images in the database. And display stored images.

So, let's see how to upload multiple images with a preview in laravel 10 and laravel 11, multiple image uploads with a preview in laravel 10/11, and multiple image uploads in laravel 10.

Step 1: Install Laravel 10/11

In this step, we will install laravel 10 using the following command.

composer create-project --prefer-dist laravel/laravel laravel_10_multiple_image_upload_example



Step 2: Create a Model and Migration

Now, we will create a model and migration using the following command.

php artisan make:model Image -m

Now, edit the model like the below code.


namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
    use HasFactory;
    protected $fillable = [



Now, add the below code in the migration file.

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) {
     * Reverse the migrations.
     * @return void
    public function down()

Now, migrate the table using the below command.

php artisan migrate


Step 3: Create Controller

In this step, we will create ImageController using the following command. So, add the following code to that file.

php artisan make:controller ImageController



namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;

class ImageController extends Controller
    public function index()
        return view('index');

    public function store(Request $request)
            'images' => 'required',
            'images.*' => 'required|image|mimes:png,jpg,jpeg|max:2048',
        $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) {
        return back()->with('success','You have successfully uploaded an images.')->with('images', $images); 



Step 4: Create Route

In this step, we will create routes in the web.php file.


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::get('index', 'index');
    Route::post('image-upload', 'store')->name('');


Step 5: Create Blade File

Now, we will create the index.blade.php file. So, add the following code to that file.


<!DOCTYPE html>
        <title>Laravel 10 Multiple Image Upload With Preview - Techsolutionstuff</title>
        <link rel="stylesheet" href="">
        <script src=""></script>
        <script src=""></script>
        <div class="container">       
            <div class="panel panel-primary col-md-8">  
                <div class="panel-heading mt-5">
                    <h4>Laravel 10 Multiple Image Upload With Preview - Techsolutionstuff</h4>
                <div class="panel-body">       
                    @if ($message = Session::get('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        @foreach(Session::get('images') as $image)
                            <img src="images/{{ $image['name'] }}" class="mb-3" width="250px">
                    <form action="{{ route('') }}" method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label class="form-label" for="inputImage">Image:</label>
                            <input type="file" name="images[]" multiple class="form-control @error('images') is-invalid @enderror">
                                <span class="text-danger">{{ $message }}</span>
                        <div class="mb-3">
                            <button type="submit" class="btn btn-success">Upload</button>




You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.