Tentu, berikut adalah artikel mengenai tutorial upload file dengan Laravel.
Mengunggah file (gambar, dokumen, video, dll.) adalah fitur umum di banyak aplikasi web. Dari profil pengguna hingga lampiran dokumen, kemampuan untuk menerima dan menyimpan file dari user sangat penting. Laravel membuat proses upload file menjadi sangat mudah dan aman dengan fungsionalitasnya yang powerful.
Pada tutorial ini, kita akan belajar cara membuat form upload file sederhana, memproses file yang diunggah, dan menyimpannya di server menggunakan Laravel.
1. Persiapan Awal
Pastikan kamu sudah memiliki proyek Laravel yang berjalan. Jika belum, buatlah yang baru:
composer create-project laravel/laravel upload-app
cd upload-app
2. Membuat Form Upload File (View)
Pertama, kita akan membuat tampilan yang berisi form untuk mengunggah file.
Buat file resources/views/upload.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Upload File</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Upload File ke Server</h1>
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('file.upload.post') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label for="file" class="form-label">Pilih File:</label>
<input type="file" class="form-control" id="file" name="file">
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
</body>
</html>
Poin Penting pada Form:
enctype="multipart/form-data": Atribut ini WAJIB ada pada tag<form>saat kamu mengunggah file. Tanpanya, file tidak akan terkirim ke server.@csrf: Direktif Blade ini menghasilkan token CSRF (Cross-Site Request Forgery) untuk melindungi form kamu dari serangan.name="file": Pastikan atributnamepada inputtype="file"sesuai dengan nama yang akan kamu gunakan di controller.
3. Membuat Controller untuk Memproses Upload
Selanjutnya, kita akan membuat controller yang akan menerima dan memproses file yang diunggah.
Buat controller baru:
php artisan make:controller FileUploadController
Edit file app/Http/Controllers/FileUploadController.php:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage; // Import facade Storage
class FileUploadController extends Controller
{
/**
* Menampilkan form upload file.
*
* @return \Illuminate\Contracts\View\View
*/
public function showUploadForm()
{
return view('upload');
}
/**
* Memproses file yang diunggah.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\RedirectResponse
*/
public function uploadFile(Request $request)
{
// 1. Validasi File
$request->validate([
'file' => 'required|file|mimes:jpeg,png,jpg,gif,svg,pdf,doc,docx|max:2048', // Maksimal 2MB
], [
'file.required' => 'Pilih file yang akan diunggah.',
'file.file' => 'Input harus berupa file.',
'file.mimes' => 'Format file tidak didukung. Gunakan JPG, PNG, GIF, SVG, PDF, DOC, atau DOCX.',
'file.max' => 'Ukuran file tidak boleh melebihi 2MB.',
]);
// 2. Simpan File
if ($request->hasFile('file')) {
$file = $request->file('file');
// Generate nama file unik
$fileName = time() . '_' . $file->getClientOriginalName();
// Simpan file ke direktori 'public/uploads'
// Laravel akan secara otomatis membuat direktori ini jika belum ada
$path = $file->storeAs('uploads', $fileName, 'public');
// Simpan informasi file ke database (opsional)
// Misalnya: File::create(['name' => $fileName, 'path' => $path]);
return redirect()->back()->with('success', 'File berhasil diunggah! Nama File: ' . $fileName);
}
return redirect()->back()->with('error', 'Gagal mengunggah file.');
}
}
Penjelasan Kode Controller:
use Illuminate\Support\Facades\Storage;: Mengimpor facadeStorageyang sangat powerful untuk interaksi dengan sistem file.$request->validate([...]): Ini adalah fitur validasi Laravel yang handal.'required': Pastikan file harus ada.'file': Pastikan input adalah file.'mimes:...': Membatasi tipe file yang diizinkan.'max:2048': Membatasi ukuran file maksimal (dalam kilobyte, jadi 2048KB = 2MB).
$request->hasFile('file'): Memeriksa apakah ada file yang diunggah dengan namafile.$file = $request->file('file'): Mengambil objek file yang diunggah.$fileName = time() . '_' . $file->getClientOriginalName(): Membuat nama file yang unik untuk menghindari konflik.time()menambahkan timestamp dangetClientOriginalName()mengambil nama asli file.$file->storeAs('uploads', $fileName, 'public'): Ini adalah metode utama untuk menyimpan file.'uploads': Direktori tempat file akan disimpan di dalam disk yang ditentukan.$fileName: Nama file setelah disimpan.'public': Nama disk yang akan digunakan. Secara default, ini merujuk ke direktoristorage/app/public.
4. Konfigurasi Storage Link
Secara default, disk public menyimpan file di storage/app/public. Namun, untuk membuat file-file ini bisa diakses dari web browser (misalnya gambar), kita perlu membuat symlink dari public/storage ke storage/app/public.
Jalankan perintah ini sekali di terminal:
php artisan storage:link
Perintah ini akan membuat folder public/storage yang mengarah ke storage/app/public. Sekarang, jika kamu mengunggah gambar misalnya, kamu bisa mengaksesnya di http://127.0.0.1:8000/storage/uploads/nama_file_kamu.jpg.
5. Mendefinisikan Routes
Terakhir, definisikan routes untuk menampilkan form dan memproses upload.
Edit routes/web.php:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUploadController;
Route::get('/', function () {
return view('welcome');
});
// Route untuk menampilkan form upload
Route::get('/upload', [FileUploadController::class, 'showUploadForm']);
// Route untuk memproses upload file (POST request)
Route::post('/upload', [FileUploadController::class, 'uploadFile'])->name('file.upload.post');
6. Menguji Aplikasi
- Pastikan server pengembangan Laravel berjalan:
php artisan serve - Buka browser dan kunjungi
http://127.0.0.1:8000/upload. - Pilih file (gambar atau dokumen) dan klik “Upload”.
- Jika berhasil, kamu akan melihat pesan sukses. Periksa direktori
storage/app/public/uploadsdi proyek kamu untuk memastikan file sudah tersimpan di sana.
Sekarang, kamu sudah memiliki fungsionalitas upload file yang kokoh di aplikasi Laravel kamu. Ini adalah pondasi penting untuk berbagai fitur, mulai dari manajemen foto hingga penyimpanan dokumen pengguna. Dengan Laravel, proses yang dulunya rumit kini menjadi jauh lebih sederhana dan aman. Selamat mencoba!
