Hello Devs,
In this tutorial, we are going to learn about laravel 7 dropzone example.
Follow this step by step guide given below:
Step 1 :
Install Laravel
composer create-project --prefer-dist laravel/laravel blog
Step 2:
Create Route routes/web.php
Route::get('/dropzone','ImageController@index');
Route::post('/dropzone/store','ImageController@store')->name('dropzone.store');
Step 3:
Create Controller
php artisan make:controller ImageController
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 resources/views/image.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>multiple image upload with dropzone.js in laravel 7 - Rathorji.in</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 - Rathorji.in</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>
I hope this example helps you.