Drag and Drop file upload using Dropzone in Laravel

Pinterest LinkedIn Tumblr

Step 1: Install the laravel project using the command line.

composer create-project --prefer-dist laravel/laravel laravelDragDrop

Step 2: Open project in code and use vs code terminal.

cd laravelDragDrop

Step 3: find .env file in root directory setup database configuration.


Step 4: Route

Open routes/web.php file.

Define 2 routes

Route::get('image', 'DropzoneController@dropzone');
Route::post('dropzone/store', 'DropzoneController@dropzoneStore')->name('');

Step 5: Controller

Create DropzoneController Controller.

php artisan make:controller DropzoneController

Open app/Http/Controllers/DropzoneController.php file.

namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
class DropzoneController extends Controller
    public function dropzone()
        return view('dropzone-view');
    public function dropzoneStore(Request $request)
        $image = $request->file('file');
        $imageName = time().'.'.$image->extension();
        return response()->json(['success'=>$imageName]);

Step 6: Create file blade file

Create a new directory category at resources/views/ directory.
In resources/views/category/dropzone-view.blade.php directory create a new dropzone-view.blade.php file.
Include CSS and JS –

<!DOCTYPE html>
    <title>Multiple image upload using dropzone.js</title>
    <script src=""></script>
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="" rel="stylesheet">
     <script src=""></script>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Upload Multiple Images using dropzone.js and Laravel</h1>
            {!! Form::open([ 'route' => [ '' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}
                <h3>Upload Multiple Image By Click On Box</h3>
            {!! Form::close() !!}
<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize         :       1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf"

Install form package

Just type the following command in terminal at the project directory and installation is done according the Laravel version:

composer require "laravelcollective/html"

Then add these lines in config/app.php

'providers' => [
    // ...
    // ...

'aliases' => [
    // ...
   'Form' => Collective\Html\FormFacade::class,
   'Html' => Collective\Html\HtmlFacade::class,
    // ...


Write A Comment