In this tutorial, we are going to implement drag and drop file upload in Laravel application using Dropzonejs.

Setting up the Project

First you need to create a new laravel project by running below command in your terminal
plaintext
1
composer create-project laravel/laravel laravel-drag-drop-using-drop-zone.js

Then navigate to your project directory by using below command in your terminal

plaintext
1
cd laravel-drag-drop-using-drop-zone.js

Set up Database details

Now you need to configure your Database details in your .env file.
plaintext
1
2
3
4
5
6
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_dropzone
DB_USERNAME=root
DB_PASSWORD=

Create Controller

Now we need to create FileController and add following code on that file:
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileController extends Controller
{
    public function index()
    {
        return view('welcome');
    }

    public function store(Request $request)
    {
        $image = $request->file('file');

        $imageName = time().'.'.$image->extension();
        $image->move(public_path('images'),$imageName);
   
        return response()->json(['success'=>$imageName]);
    }
}

Note: Make sure to create a folder called images in your public directory. This folder will hold the uploaded files.

Create View

Add below code to your welcome.blade.php file in resources/views directory and paste this code in it:
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
    <title>Laravel file upload using Dropzone.js</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <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">
                <form action="{{route('dropzone.store')}}" method="post" name="file" files="true" enctype="multipart/form-data" class="dropzone" id="image-upload">
                    @csrf
                    <div>
                        <h3 class="text-center">Upload Multiple Images</h3>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize: 1
            , acceptedFiles: ".jpeg,.jpg,.png,.gif"
        };
    </script>
</body>
</html>

Create Route

Change your web.php file according to this:
plaintext
1
2
3
4
5
6
7
<?php

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

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

Run the application

To run your application run below command in your termial:
plaintext
1
php artisan serve

Then navigate to following URL:

plaintext
1
http://127.0.0.1:8000/

Conclusion

In this tutorial, we learned how to implement drag and drop file upload in Laravel application using Dropzonejs. If you have any issue regarding this tutorial, mention your issue in comment section or reach me through my E-mail. You can obtainf the complete source code from this GitHub repository.