Dropzone Image Upload Tutorial In Laravel 7/8

In this example I will show you dropzone image upload tutorial in laravel 6/7/8. DropzoneJS is an open source library that provides drag and drop file uploads with image previews. In laravel 6, laravel 7 and laravel you can use dropzone image upload using dropzone.js.

In laravel 6/7/8 dropzone image upload or laravel 6/7/8 dropzone file upload. I am uploading multple images using dropzone in laravel 6/7/8, So, I will teach you dropzone image upload tutorial in laravel 6/7/8. Dropzone is a javascript jquery plugin, using dropzone.js we can select one by one image with preview or you can select multiple images or files at a time.

After choose image from browser 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.

So, let's see example of dropzone image upload tutorial in Laravel 6, laravel 7 and laravel 8.

 

Step 1 : Add Route In web.php File

 First we need to add route in we.php file. So, add below routes in web.php file.

Route::get('dropzone/example', 'UserController@dropzoneExample');
Route::post('dropzone/store', 'UserController@dropzoneStore')->name('dropzone.store');

 

 

Step 2 : Create Controller

Now, Create a controller and add below code in your file.

Note : Create new images folder in your public folder for save image.

<?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]);
    }
}

 

 

Step 3 : Add Blade File For View

 Now, create blade file for view output in this path resources\views\dropzone_view.blade.php

<html>
<head>
    <title>Dropzone Image Upload Example in Laravel - techsolutionstuff.com</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">Dropzone Image Upload Example in Laravel - techsolutionstuff.com</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>

And finally you will get output page like below image.

Dropzone Image Upload In Laravel

 


You might also like :

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS