ItSolutionStuff.com

Drag & Drop File Uploading using Laravel 8 Dropzone JS

By Hardik Savani • December 3, 2024
Laravel

In this quick example, let's see laravel 8 drag and drop file upload dropzone js laravel 8 dropzone example. this example will help you laravel 8 dropzone multiple files. you can understand a concept of laravel 8 dropzone image upload.

you'll learn laravel 8 dropzone file upload.

Dropzone.js is a jquery plugin, dropzone.js through we can select one by one image and also 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.

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

After run success this example you will find bellow preview in your application.

Step 1: Add Route

In first step, we will add two new route one for display view and another for store image in our routes.php file. So, open your route file and add bellow two new routes.

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::get('dropzone', [DropzoneController::class, 'dropzone']);

Route::post('dropzone/store', [DropzoneController::class, 'dropzoneStore'])->name('dropzone.store');

Step 2: Create Controller

In this step we will add two method on DropzoneController that way we can handle two route with image upload code. So, if you haven't created DropzoneController then create new as bellow, or add two method.

You have to also create new images folder in your public folder for store image.

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 dropzone()

{

return view('dropzone-view');

}

/**

* Image Upload Code

*

* @return void

*/

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

At last step we have to create dropzone-view.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-view.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Drag & Drop File Uploading using Laravel 8 Dropzone JS</title>

<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">

<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>Drag & Drop File Uploading using Laravel 8 Dropzone JS</h1>

<form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">

@csrf

<div>

<h3>Upload Multiple Image By Click On Box</h3>

</div>

</form>

</div>

</div>

</div>

<script type="text/javascript">

Dropzone.options.imageUpload = {

maxFilesize : 1,

acceptedFiles: ".jpeg,.jpg,.png,.gif"

};

</script>

</body>

</html>

You can get more information about Dropzone.js from here : Click Here.

Output:

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel 8 REST API with Passport Authentication Tutorial

Read Now →

Laravel 8 Socialite Login with Google Account Example

Read Now →

Laravel 8 Yajra Datatables Example Tutorial

Read Now →

Laravel 8 Import Export Excel and CSV File Tutorial

Read Now →

Laravel 8 Guzzle Http Client Request Example

Read Now →

Laravel 8 Livewire CRUD with Jetstream & Tailwind CSS

Read Now →

Laravel 8 Send Mail using Gmail SMTP Server

Read Now →

Laravel 8 PDF | Laravel 8 Generate PDF File using DomPDF

Read Now →

Laravel 8 Auth with Livewire Jetstream Tutorial

Read Now →

Laravel 8 Create Custom Helper Functions Tutorial

Read Now →

Laravel 8 CRUD Application Tutorial for Beginners

Read Now →