Pada artikel ini, saya akan menunjukkan cara drag and drop file di laravel 8.0. Drag dan drop di laravel sangat mudah. Pada artikel ini, Anda akan belajar mengunggah banyak file menggunakan dropzone drag and drop. Anda akan belajar drag and drop file upload di laravel.
Dropzone.js adalah plugin jquery. Melalui dropzone.js, kita dapat memilih gambar satu per satu, atau melihat pratinjaunya. Setelah memilih gambar dari browse, kita bisa melihat preview gambar. dropzone.js juga menyediakan filter, misalnya kami dapat memvalidasi unggahan maksimal, gambar atau ekstensi file tertentu, dll. Dengan menggunakan plugin dropzone ini, Anda akan belajar drag and drop file unggahan di laravel dengan mudah.
Langkah 1: Tambahkan rute
Kami telah menambahkan dua rute, yang pertama untuk menampilkan halaman dan yang kedua untuk mengunggah file. untuk menghindari melakukannya,
Baca juga: Contoh Tutorial Google Recaptcha V3 di Laravel 8
Route::get('dropzone', [DropzoneController::class, 'dropzone']);
Route::post('dropzone/store', [DropzoneController::class, 'dropzoneStore'])->name('dropzone.store');
Langkah 2: Buat Pengontrol
Buat pengontrol DropzoneController
php artisan make:controller DropzoneController
app/Http/Controllers/DropzoneController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DropzoneController extends Controller
{
public function dropzone()
{
return view('dropzone-view');
}
public function dropzoneStore(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
Langkah 3: Tambahkan File Blade
Baca juga: Laravel 8 REST Otentikasi API dengan Sanctum
<!DOCTYPE html>
<html>
<head>
<title>Drag & Drop File Upload in Laravel 8 using Dropzone JS</title>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
<style>
.dropzone {
background-color: #4a5568;
border-radius: 50px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Drag & Drop File Upload in Laravel 8 using Dropzone JS</h1>
<form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
@csrf
<div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize : 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>