Drag and Drop File Upload Using Dropzone js in Laravel 9

Websolutionstuff | Mar-19-2022 | Categories : Laravel PHP jQuery

In this article, we will see drag and drop file upload using dropzone js in laravel 9. Dropzone JS is an open-source library that provides drag and drops file uploads with image previews.

Here, we will see the dropzone image upload tutorial in laravel 9. 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 choosing an image from browse we can see the preview of the image. dropzone.js also provide filter like we can make validation for max upload, a specific image or file extension, etc.

So, let's see dropzone image upload in laravel 9, laravel 9 dropzone multiple files upload, drag and drop file upload jquery laravel 9.

Step 1 : Add Route In web.php File

In this step, we will add routes on the web.php file.

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

 

 

Step 2 : Create Controller

Now, create a controller and add the below code for image upload.

Note : Create a 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

 In this step, 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 9 - 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 9 - 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>

 

 

Output :

drag_and_drop_file_upload_using_dropzone_js_in_laravel_9_output

 


You might also like :

Recommended Post
Featured Post
How to Clear Form Data Using jQuery
How to Clear Form Data Using j...

In this concise tutorial, we will explore the process of clearing form data efficiently using jQuery. We will focus on r...

Read More

Jul-13-2021

Laravel tips: DB Models and Eloquent
Laravel tips: DB Models and El...

In the realm of web development, an efficient and robust data handling mechanism is paramount. Laravel, a PHP web applic...

Read More

Oct-11-2023

Laravel 8 Socialite Login with Google Account
Laravel 8 Socialite Login with...

In this article, we will see laravel 8 socialite login with a google account. This post gives you an example of a larave...

Read More

Dec-01-2020

How to Add Date Picker in React JS using react-datepicker
How to Add Date Picker in Reac...

A date picker is a crucial component in many web applications, enabling users to select dates conveniently. React, a pop...

Read More

Sep-11-2023