Join WhatsApp ChannelJoin Now

Laravel 8 Drag & Drop File Uploading using Dropzone JS

Today, i we will show you Laravel 8 Drag & Drop File Uploading using Dropzone JS. This article will give you simple example of Laravel 8 Drag & Drop File Uploading using Dropzone JS. you will learn Laravel 8 Drag & Drop File Uploading using Dropzone JS.

Dropzone.js is a jQuery plugin, from dropzone.js we can select individual images with preview. Dropzone.js provide filter.

From this link you can get more information from Dropzone.js:- Click Here

Step 1 :- Install Laravel 8

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

Connect Database .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dropzone
DB_USERNAME=root
DB_PASSWORD=dropzone

Step 2:- Create Routes

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DropzoneController;


Route::get('dropzone', [ DropzoneController::class, 'dropzone' ]);
Route::post('dropzone/store', [ DropzoneController::class, 'dropzoneStore' ])->name('dropzone.store');

Step 3:- Create Controller

In this step, now we should add new controller as DropzoneController. So run bellow command and create new controller.

Create DropzoneController using bellow command

php artisan make:controller DropzoneController

app/Http/Controllers/DropzoneController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class DropzoneController 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->extension();
        
        $image->move(public_path('file'),$imageName);
   
        return response()->json(['success'=>$imageName]);
    }
}

Step 3:- Create Blade

resources/views/dropzone-view.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Drag & Drop File Uploading using Dropzone JS - CodePlaners</title>
    
    <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>
<style type="text/css">
    body{
        background:#f2f2f2;
    }
    .section{
        margin-top:150px;
    }
    h1{
        margin-bottom:35px;
    }
</style>
<body>

<div class="container section">
    <div class="row">
        <div class="col-md-8  col-md-offset-2">
            <h2 class="text-center">Laravel 8 Drag & Drop File Uploading using Dropzone JS - CodePlaners</h2>
            <form action="{{ route('dropzone.store') }}" method="POST" enctype="multipart/form-data" class="dropzone" id='image-upload'>
                @csrf
                <div>
                    <h3 class="text-center">Upload Multiple Image By Click On Box</h3>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    Dropzone.options.imageUpload ={
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",
    };
</script>
</body>
</html>

Now we are ready to run command

php artisan serve

Recommended Posts