Skip to content

All topics  /  Laravel

Drag and Drop File Upload in Laravel 7/6 Using Dropzone.JS

Laravel ·

Teams applying “Drag and Drop File Upload in Laravel 7/6 Using Dropzone.JS” in a production project can use idle time works to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

In this example, you will learn drag and drop file upload in laravel. step by step explain dropzone file upload laravel. you can see dropzone js in laravel. this example will help you multiple file upload laravel dropzone. So, let's follow few step to create example of upload file using dropzone in laravel.

In this tutorial, I will learn you how to multiple image upload using dropzone in laravel 7/6.you can easy and simply to upload image using dropzone js in laravel 7/6.

This tutorial shows you things step by step for uploading the images using dropzone in laravel 7/6.

step 1:- Setup Laravel Project

Bellow command used to you can install Laravel 7/6 project.

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

step 2:- configure this database in the .env file.

After you can configure your 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

you can create to controller in your project.This command is use to define in your terminal that create to controller,model and migration automatically.

php artisan make:controller ImageController -a

step 4:- Create Route

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

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 Route

Add route in your route file.

Route::get('/dropzone','ImageController@index');
Route::post('/dropzone/store','ImageController@store')->name('dropzone.store');

step 7:- Create View File

Now, you will 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 - nicesnippets.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 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>

It will help you....

# Laravel 7

# Laravel

# Laravel 6