How To Upload Multiple Image In Laravel 9

Websolutionstuff | Mar-18-2022 | Categories : Laravel PHP jQuery

In this article, we will see how to upload multiple images in laravel 9. here, we will see the tutorial of multiple image uploads in laravel 9. upload multiple images in laravel 9 is not a big task if you follow the below steps then you can very easily upload image with validation. And as well as, how to validate image mime type, size, dimension, etc on laravel 9 controller by using laravel validation rules.

So, let's see multiple image upload in laravel 9, laravel 9 multiple image upload, upload multiple images in laravel 9, laravel 9 multiple image uploads with preview, multiple file upload in laravel 9

Step 1 : Install Laravel for Upload Multiple Image in Laravel 9

Step 2 : Add Model and Migration

Step 3 : Create Controller

Step 4 : Create Route

Step 5 : Create Blade File for View Multiple Image Upload in Laravel 9

Step 1 : Install Laravel for Upload Multiple Image in Laravel 9

In this first step, we will install a new laravel app(if required) for example how to upload multiple images in laravel 9.

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

Read Also : Laravel 9 Cron Job Task Scheduling Tutorial

Step 2 : Add Model and Migration

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

php artisan make:model File -m

Now your model has been ready you need to edit like below code in this file location 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 = [
        'filenames'
    ];
  
 
    public function setFilenamesAttribute($value)
    {
        $this->attributes['filenames'] = json_encode($value);
    }
}

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;
  
class CreateFilesTable extends Migration
{
    public function up()
    {
        Schema::create('files', function (Blueprint $table) {
            $table->id();
            $table->string('filenames');
            $table->timestamps();
        });
    }
 
    public function down()
    {
        Schema::dropIfExists('files');
    }
}

Now, run migration with artisan command in your terminal.

php artisan migrate

Read Also : Laravel 9 Autocomplete Search from Database

Step 3 : Create Controller

Now, we will create FileController for multiple image uploads examples, and don't forget to create a "files" folder in your public directory to save your images.

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\File;
  
class FileController extends Controller
{
    public function create()
    {
        return view('index');
    }
  
    public function store(Request $request)
    {
        $this->validate($request, [
                'filenames' => 'required',
                'filenames.*' => 'image'
        ]);
  
        $files = [];
        if($request->hasfile('filenames'))
         {
            foreach($request->file('filenames') as $file)
            {
                $name = time().rand(1,50).'.'.$file->extension();
                $file->move(public_path('files'), $name);  
                $files[] = $name;  
            }
         }
  
         $file= new File();
         $file->filenames = $files;
         $file->save();
  
        return back()->with('success', 'Images are successfully uploaded');
    }
}

Step 4 : Create Route

In this step, we will create GET and POST routes for multiple image uploads in laravel.

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FileController;
  
  
Route::get('file', [FileController::class, 'create']); 
Route::post('file', [FileController::class, 'store']);

Read Also : Laravel 9 Custom Helper Function Example

Step 5 : Create Blade File for View Multiple Image Upload in Laravel

Now, we will create an index.blade.php file in this location resources/views/index.blade.php.

<html lang="en">
<head>
  <title>How To Upload Multiple Image In Laravel 9 - Websolutionstuff</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  
<div class="container lst">
  
@if (count($errors) > 0)
<div class="alert alert-danger">
    <strong>Error!</strong> something went wrong <br><br>
    <ul>
      @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
      @endforeach
    </ul>
</div>
@endif
  
@if(session('success'))
<div class="alert alert-success">
  {{ session('success') }}
</div> 
@endif
  
<h3 class="well">How To Upload Multiple Image In Laravel 9 - Websolutionstuff</h3>
 
<form method="post" action="{{url('file')}}" enctype="multipart/form-data">
    @csrf
  
    <div class="input-group demo control-group lst increment" >
      <input type="file" name="filenames[]" class="myfrm form-control">
      <div class="input-group-btn"> 
        <button class="btn btn-success" type="button">Add</button>
      </div>
    </div>
    <div class="clone hide">
      <div class="demo control-group lst input-group" style="margin-top:10px">
        <input type="file" name="filenames[]" class="myfrm form-control">
        <div class="input-group-btn"> 
          <button class="btn btn-danger" type="button">Remove</button>
        </div>
      </div>
    </div>
  
    <button type="submit" class="btn btn-success" style="margin-top:10px">Submit</button>
  
</form>        
</div>
  
<script type="text/javascript">
    $(document).ready(function() {
      $(".btn-success").click(function(){ 
          var lsthmtl = $(".clone").html();
          $(".increment").after(lsthmtl);
      });
      $("body").on("click",".btn-danger",function(){ 
          $(this).parents(".demo").remove();
      });
    });
</script>
  
</body>
</html>

You might also like :