How to Upload Multiple Images by using dropzone.js ?

Today now in this post i will show you How to Upload Multiple Images by using dropzone.js ? We are always need to upload image in our laravel application. Niw In this post i will give you an example code of how to upload the multiple images by using dropzone.js in any version laravel 6, laravel 7 and laravel 8. dropzone.js through we can easily make image uploading. It is very simply and also with best layout.

WE know that Dropzone.js is a jquery best plugin. By using dropzone.js we can easily select one by one image and also with the preview. So After choose all image from browse we can see the preview of all image. Here dropzone.js is also provide the filter as like we can make the validation for the max upload, specific image or file extension etc.

Now in this example i will create two route, one for the display view and another one for the store image. Here i am also create two method on my HomeController and also one blade file with the dropzone js plugin js and with css that way we can display the layout. You can easily implement it in our laravel application by following the few step.

Step 1: Add Route

So in the first step, we need to add two new route one for the display view and another one for the store image in our web.php file. So, need to open your web.ph file and then add the bellow two new routes.

routes/web.php

Route::get('dropzone', 'HomeController@dropzone');
Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'HomeController@dropzoneStore']);
Step 2: Add Controller Method

Now in this step we need to add two method on our HomeController on that way we can handle our two route also with image upload code. So, if you do not have then need to created HomeController .For create new as bellow, or add two method.

we need to also create the new images folder in our 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]);
    }


}
Step 3: Add Blade File

Now we are at last step we need to create dropzoneview.blade.php file in our resources directory. So in this file we will write the code of image uploading by using dropzone.js, so let’s start and create new blade file and put the bellow code:

resources/views/dropzoneview.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Upload Multiple Images using dropzone.js and Laravel</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"  referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js">
    <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>

Read Also: How to crop image before upload by using croppie plugin?

Thanks for read. I hope it help you. For more you can follow us on facebook

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.