Laravel 8 Multiple Image Upload Tutorial

In this tutorial you will learn about the Laravel 8 Multiple Image Upload Tutorial and its application with practical example.

In this Laravel 8 Multiple Image Upload Tutorial, I’ll show you how to upload multiple image in laravel 8. In this laravel 8 multiple image upload example, I’ll show you how to validate upload image into folder and then save it into database. In this tutorial before saving image into database we will show preview of the images and then save it into directory. After successfully image upload into the database and folder we will display success message on the screen.

Table Of Contents−

In this step by step Laravel 8 Multiple Image Upload Tutorial I will demonstrate you with example to upload multiple images in laravel 8. Please follow the instruction given below:

Step 1: Download Laravel 8

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara8blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara8blog

DB_USERNAME=root

DB_PASSWORD=

Add Migration and Model

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:migration create_files_table

1	php artisan make:migration create_files_table

Once above command is executed there will be a migration file created inside database/migrations/ directory, just open migration file and update the function up() method as following:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateFilesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('files', function (Blueprint $table) {
            $table->id();
            $table->string('filenames');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('files');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateFilesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('files', function (Blueprint $table) {

$table->id();

$table->string('filenames');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('files');

}

php artisan migrate

1	php artisan migrate

Now, in this step we will create model file. Please run the following command:

php artisan make:model File

1	php artisan make:model File

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'
    ];
  
    /**
     * Set the user's first name.
     *
     * @param  string  $value
     * @return void
     */
    public function setFilenamesAttribute($value)
    {
        $this->attributes['filenames'] = json_encode($value);
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class File extends Model

{

use HasFactory;

protected $fillable = [

'filenames'

];

/**

* Set the user's first name.

* @param string $value

* @return void

public function setFilenamesAttribute($value)

{

$this->attributes['filenames'] = json_encode($value);

}

Step 3: Create Routes

we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FileController;
  
/*
|--------------------------------------------------------------------------
| 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('file', [FileController::class, 'create']); 
Route::post('file', [FileController::class, 'store']);

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\FileController;

|--------------------------------------------------------------------------

| 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('file', [FileController::class, 'create']);

Route::post('file', [FileController::class, 'store']);

Step 4: Create Controller

Now, lets create a controller named FileController using command given below –

php artisan make:controller <span class="heads">FileController</span>

1	php artisan make:controller <span class="heads">FileController</span>

app/Http/Controllers/FileController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\File;
  
class FileController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('create');
    }
  
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    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,100).'.'.$file->extension();
                $file->move(public_path('files'), $name);  
                $files[] = $name;  
            }
         }
  
         $file= new File();
         $file->filenames = $files;
         $file->save();
  
        return back()->with('success', 'Data Your files has been successfully added');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\File;

class FileController extends Controller

{

/**

* Show the application dashboard.

* @return \Illuminate\Http\Response

public function create()

{

return view('create');

}

/**

* Show the application dashboard.

* @return \Illuminate\Http\Response

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,100).'.'.$file->extension();

$file->move(public_path('files'), $name);

$files[] = $name;

}

$file= new File();

$file->filenames = $files;

$file->save();

return back()->with('success', 'Data Your files has been successfully added');

}

Image Store in Storage Folder.

$file->storeAs('images', $imageName);

// storage/app/files/file.png

$file->storeAs('images', $imageName);

// storage/app/files/file.png

Image in Public Folder

$file->move(public_path('images'), $imageName);
// public/files/file.png

1 2	$file->move(public_path('images'), $imageName); // public/files/file.png

Storing Image in S3

$file->storeAs('images', $imageName, 's3');

1	$file->storeAs('images', $imageName, 's3');

Step 5: Create Blade File

In this step, we will create view/blade file. Lets create a blade file “create.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/create.blade.php

<html lang="en">
<head>
  <title>Laravel 8 Multiple Image Upload Example</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>Sorry!</strong> There were more problems with your HTML input.<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">Laravel 8 Multiple Image Upload</h3>
 
<form method="post" action="{{url('file')}}" enctype="multipart/form-data">
    @csrf
  
    <div class="input-group hdtuto 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"><i class="fldemo glyphicon glyphicon-plus"></i>Add</button>
      </div>
    </div>
    <div class="clone hide">
      <div class="hdtuto 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"><i class="fldemo glyphicon glyphicon-remove"></i> 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(".hdtuto").remove();
      });
    });
</script>
  
</body>
</html>

<head>

<title>Laravel 8 Multiple Image Upload Example</title>

</head>

<body>

@if (count($errors) > 0)

<strong>Sorry!</strong> There were more problems with your HTML input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

@if(session('success'))

</div>

@endif

<h3 class="well">Laravel 8 Multiple Image Upload</h3>

@csrf

</div>

<button class="btn btn-danger" type="button"><i class="fldemo glyphicon glyphicon-remove"></i> Remove</button>

</div>

<button type="submit" class="btn btn-success" style="margin-top:10px">Submit</button>

</form>

</div>

$(document).ready(function() {

$(".btn-success").click(function(){

var lsthmtl = $(".clone").html();

$(".increment").after(lsthmtl);

});

$("body").on("click",".btn-danger",function(){

$(this).parents(".hdtuto").remove();

});

</script>

</body>

</html>

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Multiple Image Upload Tutorial