Real Programmer
Laravel

Drag and Drop file upload using Dropzone in Laravel

2 Mins Read
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.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_password

Step 4: Route

Open routes/web.php file.

Define 2 routes

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

Step 5: Controller

Create DropzoneController Controller.

php artisan make:controller DropzoneController

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

<?php
   
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();
        $image->move(public_path('images'),$imageName);
   
        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>
<html>
<head>
    <title>Multiple image upload using dropzone.js</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <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,.pdf"
        };
</script>
</body>
</html>

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' => [
    // ...
    Collective\Html\HtmlServiceProvider::class,
    // ...
],

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

GIT: https://github.com/siddharth018/laravelDropZoneJS

Related Posts