Laravel 8 Drag and Drop File Upload Using Dropzone Tutorial

Share this Article
Reading Time: 6 minutes
9 Views

In many applications, you have been observed file upload process is bit attractive. Inside this article we will see the concept of Laravel 8 drag and drop file upload using dropzone jquery plugin.

Dropzone.js is a jquery plugin, dropzone.js through we can select one by one image and also with preview.

Uploading files in application using dropzone plugin is super easy. This tutorial is very interesting and easy to learn.

We can upload any type of file using dropzone but for this tutorial we will use the feature to upload only images via dropzone jquery plugin.

Let’s get started.


Installation of Laravel 8 Application

Laravel Installation can be done in two ways.

  • Laravel Installer
  • By using composer

Laravel Installer

To install Laravel via Laravel installer, we need to install it’s installer first. We need to make use of composer for that.

$ composer global require laravel/installer

This command will install laravel installer at system. This installation is at global scope, so you type command from any directory at terminal. To verify type the given command –

$ laravel

This command will open a command palette of Laravel Installer.

To create ad install laravel project in system,

$ laravel new blog

With the name of blog a laravel project will be created at your specified path.

By using composer

Alternatively, we can also install Laravel by Composer command create-project. If your system doesn’t has Composer Installed, Click here to Install Composer ? Here is the complete command to create a laravel project-

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

After following these steps we can install a Laravel 8 application into system. To start the development server of Laravel –

$ php artisan serve

This command outputs –

Starting Laravel development server: http://127.0.0.1:8000

Assuming laravel 8 already installed at system.


Create Database & Connect

To create a database, either we can create via Manual tool of PhpMyadmin or by means of a mysql command.

CREATE DATABASE laravel_app;

To connect database with application, Open .env file from application root. Search for DB_ and update your details.

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

Create Model & Migration

We will create a model and a migration file. These are because when we upload images from dropzone we will save it to database.

Open terminal and run this artisan command

$ php artisan make:model ImageUpload -m

It will create a model (ImageUpload.php) and a migration file (2021_04_30_152115_create_image_uploads_table.php). -m to create migration file.

You should see these two files.

  • Model file is at /app/Models
  • Migration file is at /database/migrations

Open Migration file and write this updated code into it.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImageUploadsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('image_uploads', function (Blueprint $table) {
            $table->id();
            $table->text('filename');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('image_uploads');
    }
}

Migrate Migration

Back to terminal and run this artisan command.

$ php artisan migrate

It will create a table image_uploads into database.


Create Controller

Next, we need to create a controller file.

$ php artisan make:controller DropzoneController

It will create a file DropzoneController.php at /app/Http/Controllers folder.

Open DropzoneController.php and write this updated code.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\ImageUpload;

class DropzoneController extends Controller
{
    /**
     * Generate Image upload View
     *
     * @return void
     */
    public function dropzone()
    {
        return view('upload-view');
    }

    /**
     * Image Upload Code
     *
     * @return void
     */
    public function dropzoneStore(Request $request)
    {
        $image = $request->file('file');

        $imageName = $image->getClientOriginalName();

        $image->move(public_path('images'), $imageName);

        $imageUpload = new ImageUpload();
        $imageUpload->filename = $imageName;
        $imageUpload->save();

        return response()->json([
            'status' => 1,
            'filename' => $imageName
        ]);
    }
}

Create Routes

Open web.php from /routes folder.

# Add this header
use App\Http\Controllers\DropzoneController;

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

Create Blade Layout File

Next, need to create upload-view.blade.php inside /resources/views folder.

Open this view file and write this updated code.

<!DOCTYPE html>
<html>

<head>
    <title>Laravel 8 Drag And Drop File Upload Using Dropzone - Online Web Tutor</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.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 section">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h3 class="text-center">Laravel 8 Drag And Drop File Upload Using Dropzone</h3>
                <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>

Application Testing

Open project to terminal and type the command to start development server

$ php artisan serve

URL: http://127.0.0.1:8000/image-upload

This is the view we will get before upload.

Let’s upload few images by dragging and dropping into area.

Data has been saved to database table as well.

We hope this article helped you to learn about Laravel 8 Drag and Drop File Upload Using Dropzone Tutorial in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Find More on Laravel 8 Articles here

Leave a Comment