This post is also available in:
English
Hallo apa kabar teman semuanya, semoga teman teman sehat dan sukes selalu. Kembali lagi bersama temanngoding.com, kali ini kita akan membahas laravel kembali.
Kali ini kita akan membahas tutorial cara upload file atau image menggunakan plugin Dropzone.js. Kita akan mencoba upload satu atau beberapa file secara bersamaan. dan kita akan membuat tampilan yang menarik ketika melakukan uplaod file. DropzoneJs merupakan library yang open-source yang dapat anda gunakan untuk melakukan aktifitas java script.
Kalian dapat memperlajari tutorial laravel yang lainnnya:
REST API Login & Register Dengan Sanctum Laravel
Upload File menggunakan Ajax di Laravel
Tutorial Laravel : Push Notification Dengan Firebase Laravel
1. Buat Project Laravel
Jalankan perintah composer sebagai berikut:
composer create-project laravel/laravel --prefer-dist file-uploadDan masuk ke dalam root :
cd file-upload2. Buat Route
Selanjutnya kita akan membuat dua buah route, yang pertama kita akan membuat untuk membuat form. Dan yang kedua kita gunakan untuk membuat fungsi penyimpanan file/gambar.
masukan kode di bawah ini di file routes/web.php.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UploadController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('upload-ui', [UploadController::class, 'uploadUi' ]);
Route::post('file-upload', [UploadController::class, 'FileUpload' ])->name('FileUpload');
3. Upload Controller
Untuk membangun fitur pengunggahan file drag and drop kita perlu membuat pengontrol, jadi tembak perintah di bawah ini dari command prompt.
php artisan make:controller UploadControllerapp/Http/Controllers/UploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UploadController extends Controller
{
/**
* Generate Upload View
*
* @return void
*/
public function uploadUi()
{
return view('upload-view');
}
/**
* File Upload Method
*
* @return void
*/
public function FileUpload(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
4. Create Blade View
Langkah terakhir, buat file blade di resources/views/dropzone-file-upload.blade.php.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8|7 Drag And Drop File/Image Upload Examle </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
<script>
var dropzone = new Dropzone('#file-upload', {
previewTemplate: document.querySelector('#preview-template').innerHTML,
parallelUploads: 3,
thumbnailHeight: 150,
thumbnailWidth: 150,
maxFilesize: 5,
filesizeBase: 1500,
thumbnail: function (file, dataUrl) {
if (file.previewElement) {
file.previewElement.classList.remove("dz-file-preview");
var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
for (var i = 0; i < images.length; i++) {
var thumbnailElement = images[i];
thumbnailElement.alt = file.name;
thumbnailElement.src = dataUrl;
}
setTimeout(function () {
file.previewElement.classList.add("dz-image-preview");
}, 1);
}
}
});
var minSteps = 6,
maxSteps = 60,
timeBetweenSteps = 100,
bytesPerStep = 100000;
dropzone.uploadFiles = function (files) {
var self = this;
for (var i = 0; i < files.length; i++) {
var file = files[i];
totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
for (var step = 0; step < totalSteps; step++) {
var duration = timeBetweenSteps * (step + 1);
setTimeout(function (file, totalSteps, step) {
return function () {
file.upload = {
progress: 100 * (step + 1) / totalSteps,
total: file.size,
bytesSent: (step + 1) * file.size / totalSteps
};
self.emit('uploadprogress', file, file.upload.progress, file.upload
.bytesSent);
if (file.upload.progress == 100) {
file.status = Dropzone.SUCCESS;
self.emit("success", file, 'success', null);
self.emit("complete", file);
self.processQueue();
}
};
}(file, totalSteps, step), duration);
}
}
}
</script>
<style>
.dropzone {
background: #e3e6ff;
border-radius: 13px;
max-width: 550px;
margin-left: auto;
margin-right: auto;
border: 2px dotted #1833FF;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="dropzone">
<form action="{{ route('FileUpload') }}" class="dropzone" id="file-upload" enctype="multipart/form-data">
@csrf
<div class="dz-message">
Drag and Drop Single/Multiple Files Here<br>
</div>
</form>
</div>
</body>
</html>
Plugin Dropzone dipanggil di sini menggunakan tautan CDN (JavaScript dan CSS).
Objek dropzone diinisialisasi dengan id unggah file; kami juga telah menerapkan pengaturan kecil untuk fungsi pengunggahan file.
Untuk menata komponen seret dan lepas, kami menggabungkan gaya menggunakan CSS. Kami melewati dropzoneFileUpload dengan metode route() dalam arahan tindakan.
Sekarang, Anda dapat mengunggah file tunggal dan ganda menggunakan drag and drop, juga dengan event klik.
Jalankan perintah untuk memulai aplikasi:
php artisan servehttp://localhost:8000/upload-uiIni akan menjadi hasil ketika Anda berhasil mengunggah gambar menggunakan drag and drop.
Demikian tutorial kali ini, yang bisa saya sampaikan.
Terimakasih.
