April 16, 2024
Category : Laravel
Bootstrap
jQuery
Laravel - Multiple Images Uploading using dropzone.js Example
We always have to do image uploading in our laravel application, In this post i give you example code of how to upload multiple images using dropzone.js in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11. dropzone.js through we can make image uploading very simply and with best layout.
Dropzone.js is a jquery plugin, dropzone.js through we can select one by one image and also with preview. After choose image from browse we can see preview of image. dropzone.js also provide filter like we can make validation for max upload, specific image or file extension etc.
In this example i create two route, one for display view and another for store image. i also create two method on HomeController and one blade file with dropzone js plugin js and css that way we can display layout. You can implement in your laravel application by following few step.
After run success this example you will find bellow preview in your application.
Preview:
Step 1: Add Route
In first step, we will add two new route one for display view and another for store image in our routes.php file. So, open your route file and add bellow two new routes.
app/Http/routes.php
Route::get('dropzone', 'HomeController@dropzone');
Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'HomeController@dropzoneStore']);
Step 2: Add Controller Method
In this step we will add two method on HomeController that way we can handle two route with image upload code. So, if you haven't created HomeController then create new as bellow, or add two method.
You have to also create new images folder in your public folder for store image.
app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
class HomeController extends Controller
{
/**
* Generate Image upload View
*
* @return void
*/
public function dropzone()
{
return view('dropzone-view');
}
/**
* Image Upload Code
*
* @return void
*/
public function dropzoneStore(Request $request)
{
$image = $request->file('file');
$imageName = time().$image->getClientOriginalName();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
Read Also: Laravel File Upload with Validation Example
Step 3: Add Blade File
At last step we have to create dropzone-view.blade.php file in your resources directory. in this file i write code of image uploading using dropzone.js, so let's create new blade file and put bellow code:
resources/views/dropzone-view.blade.php
Read Also: Laravel 7/6 Dropzone Image Upload Tutorial
<!DOCTYPE html>
<html>
<head>
<title>Upload Multiple Images using dropzone.js and Laravel</title>
<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Upload Multiple Images using dropzone.js and Laravel</h1>
{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}
<div>
<h3>Upload Multiple Image By Click On Box</h3>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize : 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
If you found "Form Class not found error" then you can solve from this link : HTML/FORM not found in Laravel 5?.
You can get more information about Dropzone.js from here : Click Here.
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
;void(0);){kind=link}
;void(0);){kind=link}