Laravel 9 Drag and Drop File Upload with Dropzone JS

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.

Laravel 9 Drag and Drop File Upload with Dropzone JS

.medrectangle-3-multi-157{border:none!important;display:block!important;float:none;line-height:0;margin-bottom:15px!important;margin-left:0!important;margin-right:0!important;margin-top:15px!important;max-width:100%!important;min-height:250px;min-width:250px;padding:0;text-align:center!important}

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:.medrectangle-4-multi-155{border:none!important;display:block!important;float:none;line-height:0;margin-bottom:15px!important;margin-left:0!important;margin-right:0!important;margin-top:15px!important;max-width:100%!important;min-height:250px;min-width:300px;padding:0;text-align:center!important}

app/Http/Controllers/DropzoneController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

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 IlluminateSupportFacadesRoute;

use AppHttpControllersDropzoneController;

/*

|--------------------------------------------------------------------------

| 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://unpkg.com/[email protected]/dist/min/dropzone.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/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:

Laravel 9 Drag and Drop File Upload with Dropzone JS

I hope it can help you…

2 thoughts on “Laravel 9 Drag and Drop File Upload with Dropzone JS”

Leave a Comment