10-Apr-2023
.
Admin
-min.png)
Hi Guys,
In this tutorial, I am going to learn you drag and drop file upload using dropzone in laravel 8. This example will help you laravel 8 drag and drop file upload using dropzone example. step by step explain drag and drop file upload using dropzone laravel 8. you can understand a concept dropzonejs with drag and drop file upload laravel 8.
Dropzone.js is a jquery plugin, dropzone.js through we can select one by one image and also with preview. After choose image from browse we can see preview of image. dropzone.js also provide filter like we can make validation for max upload, specific image or file extension etc.
Here I will give you full example for laravel 8 drag and drop file upload using dropzone example. So, let's follow few step to create example of drag and drop file upload using dropzone in laravel 8.
Step 1 : Install Laravel 8
In the first step, we need to get fresh laravel 8 version application So let's open terminal and run bellow command to install fresh laravel project.
composer create-project --prefer-dist laravel/laravel blog
Step 2 : Database Configuration
In second step, we will make database Configuration for example database name, username, password etc for ajax form submit example of laravel 8 So lets open .env file and all deatils like as bellow:
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)
Step 3: Add Resource Route
Here, we need to add route for file upload using dropzone. so open your "routes/web.php" file and add following route.
routes/web.php
use App\Http\Controllers\DropzoneController;
Route::get('dropzone', [ DropzoneController::class, 'dropzone' ]);
Route::post('dropzone/store', [ DropzoneController::class, 'dropzoneStore' ])->name('dropzone.store');
Step 4: Create Controller
In this step, now we should create new controller as DropzoneController. So run bellow command and create new controller. bellow controller for create DropzoneController.
php artisan make:controller DropzoneController
After bellow command you will find new file in this path "app/Http/Controllers/DropzoneController.php".
In this controller will create two methods as bellow:
1)fileUpload()
2)fileUploadPost()
So, let's copy bellow code and put on DropzoneController.php file.
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 5: Add Blade
In last step. In this step we have to create just blade file for file upload using dropzone. So mainly we have to create dropzone-view file. So finally you have to create one following bellow blade file:
1) dropzone-view.blade.php
So let's just create following file and put bellow code.
resources/views/dropzone-view.blade.php
resources/views/dropzone-view.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Drag And Drop File Upload Using Dropzone</title>
<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
<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 And Drop File Upload Using Dropzone</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 drag and drop file upload using dropzone with laravel 8 so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
localhost:8000/dropzone
You will see layout as like bellow:
Form with Validation
Store Data Success
I hope it can help you....
#Laravel 8
#Laravel
