Drag & Drop File Uploading using Laravel 8 Dropzone JS
Today i will show you how to upload image use dropzone in laravel
Step 1: Add Route
In first step, we will add two new route one for display view and another for store image in our routes.php file. So, open your route file and add bellow two new routes.
routes/web.php
Route::get('dropzone', 'DropzoneController@dropzone');
Route::post('dropzone/store', 'DropzoneController@dropzoneStore')->name('dropzone.store');
Step 2: Create Controller
In this step we will add two method on DropzoneController that way we can handle two route with image upload code. So, if you haven't created DropzoneController then create new as bellow, or add two method.
You have to also create new images folder in your public folder for store image.
app/Http/Controllers/DropzoneController.php
<?php
namespace App\Http\Controllers;
use App\Http\Requests;
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('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
Step 3: Add Blade File
At last step we have to create dropzone-view.blade.php file in your resources directory. in this file i write code of image uploading using dropzone.js, so let's create new blade file and put bellow code:
resources/views/dropzone-view.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Upload Multiple Images using dropzone.js and Laravel</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>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Upload Multiple Images using dropzone.js and Laravel</h1>
{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}
<div>
<h3>Upload Multiple Image By Click On Box</h3>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize : 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
You can get more information about Dropzone.js from here : Click Here.
I hope it can help you...
No comments