How to upload multiple image using dropzone in Laravel ?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
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.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name(larave6_datatable)
DB_USERNAME=Enter_Your_Database_Username(root)
DB_PASSWORD=Enter_Your_Database_Password(root)
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.

routes/web.php

Route::get('/dropzone','ImageController@index');
Route::post('/dropzone/store','ImageController@store')->name('dropzone.store');
step 5:- Add Method In Controller

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

app/Http/Controller/ImageController.php

<?php

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();
        $image->move(public_path('images'),$avatarName);
         
        $imageUpload = new Image();
        $imageUpload->filename = $avatarName;
        $imageUpload->save();
        return response()->json(['success'=>$avatarName]);
    }
}
step 6:- Create View File

Now, we need to Create view file.

resources/views/image.blade.php

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <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">
        @csrf
        </form>
    </div>
    <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) {
                console.log(response);
            },
            error: function (file, response) {
                return false;
            }
        };
    </script>
  </body>
</html>

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

About 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.

View all posts by Shahriar Sagor →