Dropzone Image Upload Tutorial In Laravel 6/7

WebSolutionStuff | Sep-21-2020 | Categories : Laravel PHP jQuery

In this post i will show you Dropzone Image Upload using dropzone.js. DropzoneJS is an open source library that provides drag and drop file uploads with image previews.

Here i am uploading multple images using dropzone in laravel 6/7, so i will teach you dropzone imageupload tutorial in laravel 6/7, Dropzone is a javascript jquery plugin, using dropzone.js we can select one by one image 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.

 

I have  added few steps below.

Step 1 : Add Route In web.php File
Route::get('dropzone/example', '[email protected]');
Route::post('dropzone/store', '[email protected]')->name('dropzone.store');

 

Step 2 : Create Controller

Create controller and add below code

Note : Create new images folder in your public folder to 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 - websolutionstuff.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 - websolutionstuff.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_example_in_laravel

Featured Post




Follow us
facebooklogo github instagram twitter