Drag and Drop File Upload Using Dropzone js in Laravel 8

WebSolutionStuff | Oct-20-2020 | Categories : Laravel PHP jQuery

Hello Friends,

In this tutorial i will show you Drag and Drop File Upload Using Dropzone js in Laravel 8 using dropzone.js. DropzoneJS is an open source library that provides drag and drop file uploads with image previews.

Here, we will see Dropzone Image Upload Tutorial In Laravel 8, so i will teach you laravel dropzone multiple files upload, 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 steps below for laravel dropzone multiple files upload.

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

 

Step 2 : Create Controller

Create controller and add below code for image upload.

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>Drag and Drop File Upload Using Dropzone js in Laravel 8 - 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">Drag and Drop File Upload Using Dropzone js in Laravel 8 - 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_8

Featured Post