Laravel 8 Drag and Drop File Upload Using Dropzone Tutorial

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.

Table of Contents

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

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.


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


Online Web Tutor is web development community found by Sanjay Kumar. It provides web development course for free worldwide by professionally trained instructors