Anggit TSPada seri Belajar Laravel Bagian 23, kita telah mempelajari cara menggunakan Bootstrap di Laravel untuk mempercantik tampilan aplikasi atau website. Nah, pada lanjutan Belajar Laravel Bagian 24 ini, kita akan membahas cara membuat fitur upload file di Laravel secara praktis dan aman.
Seperti yang telah kita pahami dalam proses pengembangan aplikasi berbasis web, fitur upload file merupakan komponen penting yang tidak boleh diabaikan. Mulai dari kebutuhan untuk mengunggah foto profil, dokumen, hingga berbagai file pendukung lainnya, fitur ini hampir selalu dibutuhkan.
Laravel, sebagai framework PHP yang powerful, menyediakan cara yang sederhana, aman, dan efisien untuk menangani proses upload tersebut.
Cara Membuat Fitur Upload File
Berikut langkah demi langkah untuk membuat fitur upload file di Laravel secara mudah dan aman.
Step 1. Persiapan Project
Bila sebelumnya Anda sudah mengikuti series tutorial laravel dari kami, Anda dapat melanjutkan dengan projek tersebut. Namun, bila belum mengikutinya, silakan Anda buat projek baru dan install laravel.
composer create-project --prefer-dist laravel/laravel .Jalankan server:
php artisan serveSelanjutnya akses file laravel yang Anda install melalui browser di alamat http://127.0.0.1:8000.
Step 2. Buat Route
Selanjutnya, edit file routes/web.php menjadi berikut:
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
Route::get('/upload', function () {
return view('upload');
});
Route::post('/upload', function (Request $request) {
// Validasi file
$request->validate([
'file' => 'required|mimes:jpg,jpeg,png,pdf|max:2048'
]);
// Simpan file ke storage/app/public/uploads
$path = $request->file('file')->store('uploads', 'public');
return back()->with('success', 'File berhasil diupload!')->with('file', $path);
});
Step 3. Buat View menggunakan (Bootstrap)
Kemudian, buat file untuk menampilkan form upload di resources/views/upload.blade.php dengan script berikut.
<!DOCTYPE html>
<html>
<head>
<title>Upload File Laravel</title>
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Upload File dengan Laravel</h2>
{{-- Tampilkan pesan sukses --}}
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
<br>
<strong>Path:</strong> {{ session('file') }}
</div>
@endif
{{-- Tampilkan error --}}
@if($errors->any())
<div class="alert alert-danger">
<ul class="mb-0">
@foreach ($errors->all() as $err)
<li>{{ $err }}</li>
@endforeach
</ul>
</div>
@endif
<!-- Form Upload -->
<div class="card shadow">
<div class="card-body">
<form action="/upload" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label">Pilih File</label>
<input type="file" name="file" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step 4. Atur Storage Link
Agar file dapat diakses melalui browser, silakan buat symlink ke folder public/storage gunakan perintah berikut:
php artisan storage:link
Dengan melakukan symlink, maka file yang diupload akan tersimpan di direktori:storage/app/public/uploads/
Lalu, Anda dapat mengecek file yang baru saja di upload melalui url http://127.0.0.1:8000/storage/uploads/namafile.png
Step 5. Pengujian
Terakhir, mari kita lakukan pengujian fitur upload di Laravel. Caranya, silakan buka halaman http://127.0.0.1:8000/upload
Pilih file yang akan Anda upload (misalnya file gambar atau file PDF), kemudian klik Upload.
Bila sukses, maka akan tampil alert sukses + path file seperti gambar berikut.
Silakan masuk ke folder storage/upload untuk cek file yang baru saja Anda upload.
Penutup
Selamat! Hingga tahap ini, Anda telah berhasil membuat fitur upload file di Laravel dengan mudah. Dengan memahami langkah-langkah yang telah dibahas, kini Anda dapat mengimplementasikan fitur ini ke dalam berbagai proyek web yang sedang dikembangkan.
Ke depannya, Anda bisa terus bereksplorasi dengan menambahkan validasi yang lebih kompleks, mengintegrasikan penyimpanan ke layanan cloud server, atau meningkatkan aspek keamanan agar sistem upload semakin optimal dan profesional.
Demikian seri belajar Laravel bagian 24 tentang membuat fitur upload file di Laravel. Dalam seri belajar Laravel selanjutnya, kita akan belajar cara upload file ke database Laravel. Ikuti terus tutorial belajar Laravel dari Rumahweb, untuk meningkatkan kemampuan Anda dalam membuat aplikasi berbasis Laravel. Semoga bermanfaat.
