Dalam aplikasi web, sering kali pengguna perlu mengunggah dan menampilkan file, seperti gambar profil, dokumen, atau media lainnya. Menampilkan file yang diunggah adalah bagian penting dari pengalaman pengguna. Dalam Laravel, kita dapat dengan mudah menangani file yang diunggah dan menampilkannya di view menggunakan fitur built-in dari framework ini.
Tutorial ini akan memandu kamu melalui langkah-langkah untuk menampilkan file yang diunggah dengan cara yang sederhana dan efektif.
1. Menyiapkan Rute (Route) untuk Pengunggahan
Buat route di web.php untuk mengarahkan ke fungsi yang menangani pengunggahan file.
// routes/web.php
use App\Http\Controllers\FileController;
Route::get('/upload', [FileController::class, 'create']);
Route::post('/upload', [FileController::class, 'store']);
Route::get('/files/{filename}', [FileController::class, 'show']);
2. Mengunggah File
Buat controller untuk menangani logika pengunggahan dan penyimpanan file.
php artisan make:controller FileControllerLalu tambahkan metode create dan store di controller tersebut.
// app/Http/Controllers/FileController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class FileController extends Controller
{
public function create()
{
return view('upload');
}
public function store(Request $request)
{
$request->validate([
'file' => 'required|file|mimes:jpg,png,jpeg,pdf|max:2048',
]);
// Simpan file yang diunggah ke storage
$path = $request->file('file')->store('public/uploads');
// Mendapatkan nama file
$filename = basename($path);
// Simpan nama file ke database atau lakukan sesuatu dengan file
// Contoh: Model::create(['filename' => $filename]);
return back()->with('success', 'File berhasil diunggah!');
}
public function show($filename)
{
// Mengambil path lengkap dari file
$path = storage_path('app/public/uploads/' . $filename);
if (!file_exists($path)) {
abort(404);
}
// Mengembalikan respon file untuk menampilkan atau mengunduh
return response()->file($path);
}
}
3. Menyimpan Informasi File ke Database
Tambahkan migrasi dan model untuk menyimpan informasi file yang diunggah.
php artisan make:model UploadedFile -mEdit file migrasi untuk membuat tabel yang menyimpan informasi file.
// database/migrations/xxxx_xx_xx_xxxxxx_create_uploaded_files_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUploadedFilesTable extends Migration
{
public function up()
{
Schema::create('uploaded_files', function (Blueprint $table) {
$table->id();
$table->string('filename');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('uploaded_files');
}
}
Jalankan migrasi untuk membuat tabel di database.
php artisan migrateUpdate metode store di FileController untuk menyimpan informasi file ke database.
// app/Http/Controllers/FileController.php
use App\Models\UploadedFile;
public function store(Request $request)
{
$request->validate([
'file' => 'required|file|mimes:jpg,png,jpeg,pdf|max:2048',
]);
// Simpan file yang diunggah ke storage
$path = $request->file('file')->store('public/uploads');
// Mendapatkan nama file
$filename = basename($path);
// Simpan nama file ke database
UploadedFile::create(['filename' => $filename]);
return back()->with('success', 'File berhasil diunggah!');
}
4. Menampilkan File di View
Buat view untuk mengunggah dan menampilkan file.
// resources/views/upload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Upload File</title>
</head>
<body>
@if (session('success'))
<p>{{ session('success') }}</p>
@endif
<form action="/upload" method="POST" enctype="multipart/form-data">
@csrf
<input type="file" name="file" required>
<button type="submit">Unggah</button>
</form>
<h3>Files:</h3>
<ul>
@foreach ($files as $file)
<li>
<a href="{{ url('files/' . $file->filename) }}">{{ $file->filename }}</a>
</li>
@endforeach
</ul>
</body>
</html>
Modifikasi metode create di FileController untuk mengirimkan data file ke view.
// app/Http/Controllers/FileController.php
public function create()
{
$files = UploadedFile::all();
return view('upload', compact('files'));
}