Laravel 5.6 – Multiple Image Upload Using bootstrap-fileinput
In this post we will give you information about Laravel 5.6 – Multiple Image Upload Using bootstrap-fileinput. Hear we will give you detail about Laravel 5.6 – Multiple Image Upload Using bootstrap-fileinputAnd how to use it also give you demo for it if it is necessary.
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.
Preview:
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.
routes/web.php
Route::get('image-view','ImageController@index');
Route::post('image-view','ImageController@store');
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:
app/Http/Controllers/ImageController.php
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class ImageController extends Controller
{
/**
* success response method.
*
* @return IlluminateHttpResponse
*/
public function index()
{
return view('image-view');
}
/**
* success response method.
*
* @return IlluminateHttpResponse
*/
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:
resources/views/image-view.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<style type="text/css">
.main-section{
margin:0 auto;
padding: 20px;
margin-top: 100px;
background-color: #fff;
box-shadow: 0px 0px 20px #c1c1c1;
}
.fileinput-remove,
.fileinput-upload{
display: none;
}
</style>
</head>
<body >
<div >
<div >
<div >
<h1 >File Input Example</h1><br>
{!! csrf_field() !!}
<div >
<div >
<input id="file-1" type="file" name="file" multiple data-overwrite-initial="false" data-min-file-count="2">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#file-1").fileinput({
theme: 'fa',
uploadUrl: "/image-view",
uploadExtraData: function() {
return {
_token: $("input[name='_token']").val(),
};
},
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize:2000,
maxFilesNum: 10,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
</script>
</body>
</html>
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….
Hope this code and post will helped you for implement Laravel 5.6 – Multiple Image Upload Using bootstrap-fileinput. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs