Laravel 5.6 - Multiple Image Upload Using bootstrap-fileinput

By Hardik Savani November 5, 2023 Category : PHP Laravel Bootstrap jQuery

Today, i would like to share with you something amazing and superb way to multiple image uploading using bootstrap-fileinput plugin laravel 5.6 application. you can create image gallery like upload multiple image, zoom image, remove image etc by using bootstrap-fileinput plugin. you can also set front side validation for file.

bootstrap-fileinput is a bootstrap plugin. bootstrap-fileinput provide us to upload multiple images or file using dropzone. bootstrap-fileinput is also use dropzone js for image upload. bootstrap-fileinput is super and amazing plugin.

I also posted many tutorials about image upload or file upload in laravel, you can see bellow are listed, but this one it something awesome.

1) Laravel 5 - Ajax crop image before upload using using croppie plugin

2) Laravel 5 - Image Gallery CRUD example from scratch

3) Ajax Image Upload Example with Validation in PHP Laravel Framework

4) Laravel 5.3 Image Upload with Validation example

5) Laravel 5 - Multiple Images Uploading using dropzone.js example with demo

6) Laravel 5 - Image Upload and Resize Example using Intervention Image Package

7) Laravel 5 File(Image) Upload Example with Validation

As you can see above all links are related to image upload in Laravel application. in this tutorial we will create multiple image using bootstrap-fileinput plugin. So let's follow bellow step. i also created demo, you can check out that too.


Step 1: Create Routes

In this step, we will create web routes. Laravel provide web.php file for write web services route. So, let's add new route on that file.




Step 2: Create ImageController File

in next step, now we have create new controller as ImageController and we will write get and post method with image upload login, So let's create a controller:



namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller



* success response method.


* @return \Illuminate\Http\Response


public function index()


return view('image-view');



* success response method.


* @return \Illuminate\Http\Response


public function store(Request $request)


$imageName = request()->file->getClientOriginalName();

request()->file->move(public_path('upload'), $imageName);

return response()->json(['uploaded' => '/upload/'.$imageName]);



Step 2: Create Blade File

in last step, now we have create new image-view.blade.php file here we we will write code for js plugin, so let's create file:


<!DOCTYPE html>

<html lang="en">


<link href="" rel="stylesheet">

<link href="" media="all" rel="stylesheet" type="text/css"/>

<link href="" media="all" rel="stylesheet" type="text/css"/>

<style type="text/css">


margin:0 auto;

padding: 20px;

margin-top: 100px;

background-color: #fff;

box-shadow: 0px 0px 20px #c1c1c1;




display: none;




<body class="bg-danger">

<div class="container">

<div class="row">

<div class="col-lg-8 col-sm-12 col-11 main-section">

<h1 class="text-center text-danger">File Input Example</h1><br>

{!! csrf_field() !!}

<div class="form-group">

<div class="file-loading">

<input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">






<script src=""></script>

<script src="" type="text/javascript"></script>

<script src="" type="text/javascript"></script>

<script src="" type="text/javascript"></script>

<script src="" type="text/javascript"></script>

<script type="text/javascript">


theme: 'fa',

uploadUrl: "/image-view",

uploadExtraData: function() {

return {

_token: $("input[name='_token']").val(),



allowedFileExtensions: ['jpg', 'png', 'gif'],

overwriteInitial: false,


maxFilesNum: 10,

slugCallback: function (filename) {

return filename.replace('(', '_').replace(']', '_');






Now at last think,

You must need to create "upload" folder in your public folder.

You can also see demo from bellow button.

I hope it can help you....

Watch Online Video: