Home Laravel How to upload multiple image using dropzone in Laravel ?

How to upload multiple image using dropzone in Laravel ?

by Shahriar Sagor
Laravel multiple image upload using dropzone

Hi Dev’s, Now today in this tutorial, I will show with you how to upload multiple images by using dropzone in laravel 8 application. Now here we can easy and simply to upload image by using dropzone js in laravel application.

So now in this tutorial show you that thing step by step for uploading the images by using dropzone in laravel 8 application.

step 1:- Setup Laravel Project

By using bellow command we can install Laravel project.

composer create-project --prefer-dist laravel/laravel blog
step 2:- configure this database in the .env file.

So after that we can configure our database in .env file and change the database name, username, password in the .env file.

step 3:- Create Controller

Now need to create controller in your project. So by using this command in your terminal that create to controller,model and migration automatically.

for better know you can follow : How to Create Controller in Laravel 8 By using Command ?

php artisan make:controller ImageController -a
step 4:- Create Route

Now need to Add route in your route file.


step 5:- Add Method In Controller

So now, you can write this code in controller file.



namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Image;

class ImageController extends Controller
    public function index()
    	return view('image');

    public function store(Request $request)
    	$image = $request->file('file');
        $avatarName = $image->getClientOriginalName();
        $imageUpload = new Image();
        $imageUpload->filename = $avatarName;
        return response()->json(['success'=>$avatarName]);
step 6:- Create View File

Now, we need to Create view file.


<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Laravel 7/6 multiple image upload using dropzone - CodingsPoint.com</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
    <div class="container">
        <h2>Laravel 7/6  multiple image upload using dropzone  - nicesnippets.com</h2><br/>
        <form method="post" action="{{ route('dropzone.store') }}" enctype="multipart/form-data"
          class="dropzone" id="dropzone">
    <script type="text/javascript">
        Dropzone.options.dropzone =
            maxFilesize: 10,
            renameFile: function (file) {
                var dt = new Date();
                var time = dt.getTime();
                return time + file.name;
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 60000,
            success: function (file, response) {
            error: function (file, response) {
                return false;

Read also : How To Set Bcc And Cc Mail Address In Laravel Mail?

I hope it will help you. Also you can follow us on Facebook


You may also like