Di dunia digital saat ini, berbagi file secara aman dan efisien menjadi kebutuhan utama, terutama bagi para pengajar, developer, dan content creator. Bayangkan Anda memiliki materi belajar berupa PDF, video, atau dokumen lain, dan ingin memastikan siswa atau pengguna dapat melihat file langsung di browser tanpa harus mengunduhnya. Banyak yang masih bingung bagaimana mengatur ini di Laravel. Kali ini, kita akan membahas cara membuat viewer file inline yang aman dan mudah diakses.
Cerita:
Andi adalah seorang developer yang sedang membangun platform pembelajaran online. Ia ingin setiap materi yang diunggah oleh admin bisa langsung dilihat oleh pengguna di browser, baik itu PDF, video, maupun gambar thumbnail, tanpa harus men-download file terlebih dahulu.
Awalnya, Andi mencoba membuat link download sederhana, tapi banyak pengguna mengeluh karena mereka ingin langsung melihat materi sebelum memutuskan untuk menyimpannya. Di sinilah Andi menemukan solusi yang elegan menggunakan Laravel response()->file().
Dengan beberapa baris kode, Andi membuat dua route utama:
- Viewer Materi
Route::get('/materi_uploads/{file_name}', function($file_name){
$filePath = storage_path('app/public/materi_uploads/' . $file_name);
if (!file_exists($filePath)) abort(404, 'File tidak ditemukan.');
if (!preg_match('/^[a-zA-Z0-9_\-\.]+$/', $file_name)) abort(400, 'Nama file tidak valid.');
return response()->file($filePath);
})->name('materi.view');
- Viewer Thumbnail
Route::get('/materi_thumbnails/{file_name}', function($file_name){
$filePath = storage_path('app/public/materi_thumbnails/' . $file_name);
if (!file_exists($filePath)) abort(404, 'File tidak ditemukan.');
if (!preg_match('/^[a-zA-Z0-9_\-\.]+$/', $file_name)) abort(400, 'Nama file tidak valid.');
return response()->file($filePath);
})->name('thumbnail.view');
Andi menambahkan beberapa lapisan keamanan:
- Mengecek apakah file benar-benar ada, agar tidak muncul error di browser.
- Memvalidasi nama file untuk mencegah manipulasi URL.
Hasilnya luar biasa: pengguna kini bisa menonton video, membaca PDF, atau melihat gambar thumbnail langsung di halaman platform, tanpa harus menunggu proses download. Bahkan Andi bisa menempatkan viewer ini di dalam iframe atau <video> tag di Blade, membuat pengalaman belajar semakin interaktif.
Kesimpulan:
Dengan trik sederhana ini, Andi berhasil meningkatkan pengalaman pengguna secara signifikan. Tidak hanya mempermudah akses materi, tapi juga membuat platform lebih profesional dan aman. Jika Anda juga ingin membangun aplikasi pembelajaran atau platform berbagi file, teknik ini bisa langsung diterapkan.
