10-Apr-2023
.
Admin
Hii Guys,
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 7/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....
#Laravel 7
#Laravel
#Laravel 6
