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....
No comments:
Post a Comment