Laravel 8 Drag and Drop File Upload using Dropzone Example

Laravel , Laravel 8

Nicesnippets

335

12-09-2020


Laravel 8 Drag and Drop File Upload using Dropzone Example

Hi Guys,

In this tutorial, I am going to learn you drag and drop file upload using dropzone in laravel 8. This example will help you laravel 8 drag and drop file upload using dropzone example. step by step explain drag and drop file upload using dropzone laravel 8. you can understand a concept dropzonejs with drag and drop file upload laravel 8.

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.

Here I will give you full example for laravel 8 drag and drop file upload using dropzone example. So, let's follow few step to create example of drag and drop file upload using dropzone in laravel 8.

Step 1 : Install Laravel 8

In the first step, we need to get fresh laravel 8 version application So let's open terminal and run bellow command to install fresh laravel project.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Database Configuration

In second step, we will make database Configuration for example database name, username, password etc for ajax form submit example of laravel 8 So lets open .env file and all deatils like as bellow:

.env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name(blog)

DB_USERNAME=here database username(root)

DB_PASSWORD=here database password(root)

Step 3: Add Resource Route

Here, we need to add route for file upload using dropzone. so open your "routes/web.php" file and add following route.

routes/web.php

use App\Http\Controllers\DropzoneController;

Route::get('dropzone', [ DropzoneController::class, 'dropzone' ]);

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

Step 4: Create Controller

In this step, now we should create new controller as DropzoneController. So run bellow command and create new controller. bellow controller for create DropzoneController.

php artisan make:controller DropzoneController

After bellow command you will find new file in this path "app/Http/Controllers/DropzoneController.php".

In this controller will create two methods as bellow:

1)fileUpload()

2)fileUploadPost()

So, let's copy bellow code and put on DropzoneController.php 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 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('file'),$imageName);

return response()->json(['success'=>$imageName]);

}

}

Step 5: Add Blade

In last step. In this step we have to create just blade file for file upload using dropzone. So mainly we have to create dropzone-view file. So finally you have to create one following bellow blade file:

1) dropzone-view.blade.php

So let's just create following file and put bellow code.

resources/views/dropzone-view.blade.php

resources/views/dropzone-view.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Drag And Drop File Upload Using Dropzone</title>

<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>

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

<style type="text/css">

body{

background:#f2f2f2;

}

.section{

margin-top:150px;

}

h1{

margin-bottom:35px;

}

</style>

<body>

<div class="container section">

<div class="row">

<div class="col-md-8 col-md-offset-2">

<h2 class="text-center">Laravel 8 Drag And Drop File Upload Using Dropzone</h2>

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

@csrf

<div>

<h3 class="text-center">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>

Now we are ready to run drag and drop file upload using dropzone with laravel 8 so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

localhost:8000/dropzone

You will see layout as like bellow:

Form with Validation

Store Data Success

I hope it can help you....


Recommended Posts