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
- Installation of Laravel 8 Application
- Create Database & Connect
- Create Model & Migration
- Create Controller
- Create Routes
- Create Blade Layout File
- Application Testing
$ 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