Laravel 7/6 Dropzone Image Upload Tutorial
In this tutorial, i will show example of laravel 7/6 image upload using dropzone. you can lean multiple upload using dropzone.js in laravel 7/6. we can drag and drop file upload using dropzone js in laravel 7/6.
You can follow step by step dropzone multiple files upload with laravel 6 application example.
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.
In this example i create two route, one for display view and another for store image. i also create two method on HomeController and one blade file with dropzone js plugin js and css that way we can display layout. You can implement in your laravel application by following few step.
After run success this example you will find bellow preview in your application.
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.
Route::get('dropzone', '[email protected]');
Route::post('dropzone/store', '[email protected]')->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.
class DropzoneController extends Controller
* Generate Image upload View
* @return void
public function dropzone()
* Image Upload Code
* @return void
public function dropzoneStore(Request $request)
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
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:
I hope it can help you...