How to Upload Multiple Image in Laravel 8

Websolutionstuff | Sep-17-2021 | Categories : Laravel

In this example we will see how to upload multiple image in laravel 8. here, we wil see tutorial of multiple image upload in laravel.upload multiple images in laravel 8 is not a big task if you follow below steps then you can very easily upload image with validation.

So let's see laravel 8 multiple image upload or laravel 8 multiple image upload with preview.

 

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

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

 

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

In this first step we will install new laravel app(if required) for example of how to upload multiple image in laravel 8.

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

 

Step 2: Add Model and Migration

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

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 below code in 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

 

Step 3: Create Controller

Now, we will create FileController for multiple image upload example, and don't forgot to create "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 forth steps we will create GET and POST routes for multiple image upload 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']);

 

 

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

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

<html lang="en">
<head>
  <title>How to Upload Multiple Image in Laravel 8 - websolutionstuff.com</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 8 - websolutionstuff.com</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 :

Recommended Post
Featured Post
How to Filter Datatable using Dropdown in Laravel 10
How to Filter Datatable using...

Hello developers! 👋 Ever found yourself dealing with a DataTable in Laravel and wished for a nifty way to filter th...

Read More

Feb-07-2024

How to Search Records using Laravel 10 Livewire
How to Search Records using La...

Hey developers! Today, I'm excited to walk you through an incredibly powerful feature in Laravel 10: searching...

Read More

Dec-27-2023

How to Image Upload Laravel 11 Vue 3 Example
How to Image Upload Laravel 11...

Hello, laravel web developer! In this article, we'll see how to image upload in laravel 11 vue 3. Here, we'...

Read More

May-27-2024

How To Get Multiple Checkbox Value In Javascript
How To Get Multiple Checkbox V...

Checkboxes let us make multiple choices. But how do you actually use them in JavaScript? It might seem tricky, especiall...

Read More

Jan-10-2023