Drag and Drop File Upload in Laravel 7/6 Using Dropzone.JS

Laravel 6 , Laravel , Laravel 7

Nicesnippets

12842

22-02-2020


Drag and Drop File Upload in Laravel 7/6 Using Dropzone.JS

In this example, you will learn drag and drop file upload in laravel. step by step explain dropzone file upload laravel. you can see dropzone js in laravel. this example will help you multiple file upload laravel dropzone. So, let's follow few step to create example of upload file using dropzone in laravel.

In this tutorial, I will learn you how to multiple image upload using dropzone in laravel 7/6.you can easy and simply to upload image using dropzone js in laravel 7/6.

This tutorial shows you things step by step for uploading the images using dropzone in laravel 7/6.

step 1:- Setup Laravel Project

Bellow command used to you can install Laravel 7/6 project.

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

step 2:- configure this database in the .env file.

After you can configure your database in .env file and change the database name, username, password in the .env file.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name(larave6_datatable)

DB_USERNAME=Enter_Your_Database_Username(root)

DB_PASSWORD=Enter_Your_Database_Password(root)

step 3:- Create Controller

you can create to controller in your project.This command is use to define in your terminal that create to controller,model and migration automatically.

php artisan make:controller ImageController -a

step 4:- Create Route

Add route in your route file.

routes/web.php

Route::get('/dropzone','ImageController@index');

Route::post('/dropzone/store','ImageController@store')->name('dropzone.store');

step 5:- Add Method In Controller

Now, you can write this code in controller file.

app/Http/Controller/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Image;

class ImageController extends Controller

{

public function index()

{

return view('image');

}

public function store(Request $request)

{

$image = $request->file('file');

$avatarName = $image->getClientOriginalName();

$image->move(public_path('images'),$avatarName);

$imageUpload = new Image();

$imageUpload->filename = $avatarName;

$imageUpload->save();

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

}

}

step 6:- Create Route

Add route in your route file.

Route::get('/dropzone','ImageController@index');

Route::post('/dropzone/store','ImageController@store')->name('dropzone.store');

step 7:- Create View File

Now, you will Create view file.

resources/views/image.blade.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Laravel 7/6 multiple image upload using dropzone - nicesnippets.com</title>

<link rel="stylesheet" href="{{asset('css/app.css')}}">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>

</head>

<body>

<div class="container">

<h2>Laravel 6 multiple image upload using dropzone - nicesnippets.com</h2><br/>

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

class="dropzone" id="dropzone">

@csrf

</form>

</div>

<script type="text/javascript">

Dropzone.options.dropzone =

{

maxFilesize: 10,

renameFile: function (file) {

var dt = new Date();

var time = dt.getTime();

return time + file.name;

},

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

addRemoveLinks: true,

timeout: 60000,

success: function (file, response) {

console.log(response);

},

error: function (file, response) {

return false;

}

};

</script>

</body>

</html>

It will help you....


Recommended Posts