Raviya Technical
Published in

Raviya Technical

Laravel with Packages | Laravel Dropzone Image Upload Tutorial

In this tutorial, I will show an example of a laravel 7/6 image upload using dropzone. you can learn multiple uploads 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 the 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 choosing an image from browse, we can see a preview of the image. dropzone.js also provide filter like we can make validation for max upload, a specific image or file extension, etc.

In this example, I create two routes, one for display view and another for store image. I also create two methods on HomeController and one blade file with dropzone js plugin js and CSS that way we can display the layout. You can implement it in your laravel application by following a few steps.

After running successfully in this example you will find below a preview of your application.

Step 1: Add Route

In the first step, we will add two new routes one for display view and another for storing images in our routes.php file. So, open your route file and add below 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 methods on DropzoneController that way we can handle two routes with image upload code. So, if you haven’t created DropzoneController then create new as below, or add two methods.

You have to also create new images folder in your public folder to store images.

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

In the last step, we have to create a dropzone-view.blade.php file in your resources directory. in this file I write code for image uploading using dropzone.js, so let’s create a new blade file and put the below 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…

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store