10-Apr-2023
.
Admin
Hello all! In this article, we will talk about laravel 7 dropzone example. This post will give you simple example of laravel 7 dropzone multiple files. Here you will learn laravel 7 dropzone image upload. this example will help you laravel 7 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.
This tutorial shows you things step by step for uploading the images using dropzone in laravel 6.
step 1: Setup Laravel Project
Bellow command used to you can install Laravel 7 project.
composer create-project --prefer-dist laravel/laravel blog
step 2: Create 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
Route::get('/dropzone','ImageController@index');
Route::post('/dropzone/store','ImageController@store')->name('dropzone.store');
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
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/Controller/ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
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 4: Create View File
At last step we have to create image.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/image.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>multiple image upload with dropzone.js in laravel 7 - 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>Multiple Image Upload With dropzone.js In Laravel 7 - 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....
#Laravel 7
