Laravel 9 Drag And Drop File Upload Using Dropzone JS
In this article, we will see laravel 9 drag and drop file upload using dropzone js. Dropzone JS is an open-source library that provides drag and drops file uploads with image previews. Here, we will see laravel 9 dropzone multiple image uploads. So, we will learn how to upload files using dropzone js in laravel 9. Dropzone is a javascript jquery plugin, using dropzone.js we can select one by one image with a preview. After choosing an image from browse we can see the preview of the image.
dropzone.js also provides a filter like we can make validation for maximum image upload, a specific image, or file extension like png, jpg, etc. There are two ways to add Dropzone to your projects using npm and Stand-alone file.
So, let's see dropzone image upload in laravel 9 and multiple files upload using dropzone in laravel 9.
Drag And Drop File Upload With Dropzone JS In Laravel 9
In this step, we will add routes to the web.php file.
Route::get('dropzone/example', 'App\Http\Controllers\UserController@dropzoneExample');
Route::post('dropzone/store', 'App\Http\Controllers\UserController@dropzoneStore')->name('dropzone.store');
Now, create a controller and add the below code for image upload.
Note: Create a new images folder in your public folder to save images.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UserController extends Controller
{
public function dropzoneExample()
{
return view('dropzone_view');
}
public function dropzoneStore(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
In this step, create blade file for view output in this path resources\views\dropzone_view.blade.php
<html>
<head>
<title>Laravel 9 Drag And Drop File Upload Using Dropzone JS - Techsolutionstuff</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.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">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Laravel 9 Drag And Drop File Upload Using Dropzone JS - Techsolutionstuff</h1><br>
<form action="{{route('dropzone.store')}}" method="post" name="file" files="true" enctype="multipart/form-data" class="dropzone" id="image-upload">
@csrf
<div>
<h3 class="text-center">Upload Multiple Images</h3>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize: 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
You might also like:
- Read Also: Laravel Unique Validation on Update
- Read Also: How To Create Image Slider Using jQuery
- Read Also: How To Validate Max File Size Using Javascript
- Read Also: Crop Image Before Upload Using Croppie Plugin
