Laravel 9 Drag and Drop File Upload with Dropzone JS

https://www.itsolutionstuff.com/post/laravel-9-drag-and-drop-file-upload-with-dropzone-jsexample.html

https://www.itsolutionstuff.com/post/laravel-9-drag-and-drop-file-upload-with-dropzone-jsexample.html Hello Dev,

This article is focused on laravel 9 drag and drop file upload dropzone js. if you want to see an example of laravel 9 dropzone example then you are in the right place. you can see laravel 9 dropzone multiple files. we will help you to give an example of laravel 9 dropzone image upload. You just need to some steps to do laravel 9 dropzone file upload.

Dropzone.js is a jquery plugin, dropzone.js we can select one by one image and also with preview. After choosing an image from browse we can see a preview of the image. dropzone.js also provide filter like we can make validation for max upload, a specific image or file extension, etc.

In this example i create two route, one for display view and another for store image. i also create two methods on DropzoneController and one blade file with dropzone js plugin js and css that way we can display the layout. You can implement in your laravel application by following few steps.

Step 1: Install Laravel 9

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Controller

In this point, now we should create a new controller as DropzoneController. In this controller, we will add two methods, one for return view response and another for store images.

All images will store on the "images" folder in a public folder.

Let's update following code to your controller file:

app/Http/Controllers/DropzoneController.php

<?php  namespace App\Http\Controllers;  use Illuminate\Http\Request; class DropzoneController extends Controller{    /**     * Generate Image upload View     *     * @return void     */    public function index()    {        return view('dropzone');    }          /**     * Image Upload Code     *     * @return void     */    public function store(Request $request)    {        $image = $request->file('file');             $imageName = time().'.'.$image->extension();        $image->move(public_path('images'),$imageName);             return response()->json(['success'=>$imageName]);    }}

Step 3: Add Routes

In this is step we need to create route for datatables layout file and another one for store images. so open your "routes/web.php" file and add following route.

routes/web.php

<?php  use Illuminate\Support\Facades\Route;  use App\Http\Controllers\DropzoneController;  /*|--------------------------------------------------------------------------| Web Routes|--------------------------------------------------------------------------|| Here is where you can register web routes for your application. These| routes are loaded by the RouteServiceProvider within a group which| contains the "web" middleware group. Now create something great!|*/  Route::controller(DropzoneController::class)->group(function(){    Route::get('dropzone', 'index');    Route::post('dropzone/store', 'store')->name('dropzone.store');});

Step 4: Add Blade File

At last step we have to create dropzone.blade.php file in your resources directory. in this file i write code of image uploading using dropzone.js, so let's create new blade file and put bellow code:

resources/views/dropzone.blade.php

<!DOCTYPE html><html><head>    <title>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /></head><body>    <div class="container">    <div class="row">        <div class="col-md-12">            <h1>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</h1>                <form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">                @csrf                <div>                    <h4>Upload Multiple Image By Click On Box</h4>                </div>            </form>        </div>    </div></div>    <script type="text/javascript">          Dropzone.autoDiscover = false;          var dropzone = new Dropzone('#image-upload', {              thumbnailWidth: 200,              maxFilesize: 1,              acceptedFiles: ".jpeg,.jpg,.png,.gif"            });  </script>    </body></html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/dropzone

Output:

I hope it can help you...

PreviousLaravel 9 Scout Full Text Search Tutorial (ok)NextLaravel 9 Cron Job Task Scheduling Tutorial

Last updated 2 years ago

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class DropzoneController extends Controller{ /** * Generate Image upload View * * @return void */ public function index() { return view('dropzone'); } /** * Image Upload Code * * @return void */ public function store(Request $request) { $image = $request->file('file'); $imageName = time().'.'.$image->extension(); $image->move(public_path('images'),$imageName); return response()->json(['success'=>$imageName]); }}

<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\DropzoneController; /*|--------------------------------------------------------------------------| Web Routes|--------------------------------------------------------------------------|| Here is where you can register web routes for your application. These| routes are loaded by the RouteServiceProvider within a group which| contains the "web" middleware group. Now create something great!|*/ Route::controller(DropzoneController::class)->group(function(){ Route::get('dropzone', 'index'); Route::post('dropzone/store', 'store')->name('dropzone.store');});

<!DOCTYPE html><html><head> <title>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /></head><body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</h1> <form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone"> @csrf <div> <h4>Upload Multiple Image By Click On Box</h4> </div> </form> </div> </div></div> <script type="text/javascript"> Dropzone.autoDiscover = false; var dropzone = new Dropzone('#image-upload', { thumbnailWidth: 200, maxFilesize: 1, acceptedFiles: ".jpeg,.jpg,.png,.gif" }); </script> </body></html>