Laravel 10 Multiple Image Upload Example

Websolutionstuff | Mar-17-2023 | Categories : Laravel

In this article, we will see laravel 10 multiple image examples. Here, we will learn about how to upload multiple images in laravel 10. Uploading multiple images in laravel 10 is not a big task if you follow the below steps then you can very easily upload images with validation. 

And also, we will validate image mime type, size, dimension, etc on the laravel 10 by using laravel validation rules.

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

 

Step 1: Install Laravel 10

In this step, we will install laravel 10 using the following command. So, run the below command to the terminal

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

 

 

Step 2: Add Model and Migration

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

php artisan make:model Image -m

Now, we will update the Image model like the below 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

 

 

Step 3: Create ImageController

Now, we will create ImageController for multiple image upload examples, 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 ImageController 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);
    }
}

 

Step 4: Create Route

In this step, we will add routes to the web.php file.

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

 

 

Step 5: Create Blade File

Now, we will create an index.blade.php file.

resources/views/index.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel 10 Multiple Image Upload Example - Websolutionstuff</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>Laravel 10 Multiple Image Upload Example - Websolutionstuff</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:

Recommended Post
Featured Post
How To Get Current Date And Time In Node.js
How To Get Current Date And Ti...

In this example we will see how to get current date and time in Node.js application. In Node.js date and time are handle...

Read More

Sep-01-2021

Laravel 9 Group By Query Example
Laravel 9 Group By Query Examp...

In this article, we will see laravel 9 group by query example. how to use group by in laravel 9. As you might expec...

Read More

Mar-29-2022

How to Set Auto Database BackUp using Cron Scheduler In Laravel
How to Set Auto Database BackU...

In this article, we will see how to set auto database backup using the cron scheduler in laravel. here we will set ...

Read More

Feb-18-2021

How To Import CSV File In MySQL Using Node.js
How To Import CSV File In MySQ...

In this tutorial we will see how to import CSV file in MySQL using Node.js. Import and export CSV/EXCEL file in Nod...

Read More

Jul-30-2021