DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

Laravel 9 Drag And Drop File Upload Using Dropzone JS

In this article, we will see laravel 9 drag and drop file upload using dropzone js.

Dropzone JS is an open-source library that provides drag and drops file uploads with image previews.

Here, we will see laravel 9 dropzone multiple image uploads. So, we will learn how to upload files using dropzone js in laravel 9.

Dropzone is a javascript jquery plugin, using dropzone.js we can select one by one image with a preview. After choosing an image from browse we can see the preview of the image.

dropzone.js also provides a filter like we can make validation for maximum image upload, a specific image, or file extension like png, jpg, etc.

There are two ways to add Dropzone to your projects using npm and Stand-alone file.

So, let's see dropzone image upload in laravel 9 and multiple files upload using dropzone in laravel 9.

Drag And Drop File Upload With Dropzone JS In Laravel 9

Step 1: Add Route In web.php File

In this step, we will add routes to 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');
Enter fullscreen mode Exit fullscreen mode

Read Also: Laravel 9 Multiple Image Upload Example


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 images.

<?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]);
    }
}
Enter fullscreen mode Exit fullscreen mode

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>Laravel 9 Drag And Drop File Upload Using Dropzone JS - Techsolutionstuff</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">Laravel 9 Drag And Drop File Upload Using Dropzone JS - Techsolutionstuff</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>
Enter fullscreen mode Exit fullscreen mode

You might also like:

Top comments (0)

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.