Published - | Updated - May 16, 2021 12:39 am
201 Views
Today, i we will show you Laravel 8 Drag & Drop File Uploading using Dropzone JS. This article will give you simple example of Laravel 8 Drag & Drop File Uploading using Dropzone JS. you will learn Laravel 8 Drag & Drop File Uploading using Dropzone JS.
Dropzone.js is a jQuery plugin, from dropzone.js we can select individual images with preview. Dropzone.js provide filter.
From this link you can get more information from Dropzone.js:- Click Here
Step 1 :- Install Laravel 8
composer create-project --prefer-dist laravel/laravel dropzone
Connect Database .env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=dropzone DB_USERNAME=root DB_PASSWORD=dropzone
Step 2:- Create Routes
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DropzoneController;
Route::get('dropzone', [ DropzoneController::class, 'dropzone' ]);
Route::post('dropzone/store', [ DropzoneController::class, 'dropzoneStore' ])->name('dropzone.store');
Step 3:- Create Controller
In this step, now we should add new controller as DropzoneController. So run bellow command and create new controller.
Create DropzoneController using bellow command
php artisan make:controller DropzoneController
app/Http/Controllers/DropzoneController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DropzoneController extends Controller
{
/**
* Generate Image upload View
*
* @return void
*/
public function dropzone()
{
return view('dropzone-view');
}
/**
* Image Upload Code
*
* @return void
*/
public function dropzoneStore(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('file'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
Step 3:- Create Blade
resources/views/dropzone-view.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Drag & Drop File Uploading using Dropzone JS - CodePlaners</title>
<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>
<style type="text/css">
body{
background:#f2f2f2;
}
.section{
margin-top:150px;
}
h1{
margin-bottom:35px;
}
</style>
<body>
<div class="container section">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">Laravel 8 Drag & Drop File Uploading using Dropzone JS - CodePlaners</h2>
<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>
Now we are ready to run command
php artisan serve