BREAKING NEWS

Tutorial Laravel 11 : #17 Upload dan Hapus File pada Laravel

Laravel, Tutorial Laravel 11, Website |29 January 2025 |by Agus Suratna |0

Membuat Upload File dengan Laravel

Pada tutorial kali ini kita akan belajar membuat upload file dengan Laravel, upload file dapat berupa file gambar, file excel (.csv, .xls, xlsx), file .txt, file word, file zip dan sebagainya, nanti kita bisa sesuaikan dengan kebutuhan kita.

Untuk mengikuti tutorial ini kita harus siapkan sebuah project laravel, jadi pastikan kita sudah menginstall project laravel. Pada tutorial ini menggunakan project yang sebelumnya sudah dibuat yaitu latihan_laravel. Jika belum mempunyai projectnya, silahkan buat dulu projectnya, untuk cara menginstall project laravel, silahkan baca di tutorial berikut ini Cara Install Laravel di Windows .

Untuk mulai membuat contoh upload file dengan laravel, pertama  kita buat sebuah controller baru dengan nama UploadController.php, untuk membuat controllernya kita bisa gunakan perintah php artisan seperti berikut :

php artisan make:controller UploadController

 

Selanjutnya kita buat 2 buah route yang akan kita gunakan sebagai form upload gambar dan satunya lagi sebagai pemproses file yang diupload.

latihan_laravel/routes/web.php :

Route::get('/upload', [UploadController::class,'upload']);
Route::post('/upload/proses', [UploadController::class,'prosesupload']);

Pada route dengan nama ‘/upload’, akan menjalankan method upload() pada controller UploadController.php. Kemudian route satunya lagi kita buat dengan nama ‘/upload/proses’, akan menjalankan method prosesupload() dalam controller UploadController.php.

Selanjutnya kita buka file controller UploadController.php tersebut dan buat method upload() seperti berikut :

latihan_laravel/app/Http/Controllers/UploadController.php :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    //method upload untuk memanggil tampilan halaman upload
    public function upload()
    {
        return view('upload/v_upload');
    }
}

Perhatikan pada method upload(), kita menampilkan view upload.blade.php, dimana pada view upload.blade.php ini kita akan membuat form penginputan file yang akan di upload.

Buat sebuah view baru dengan nama v_upload.blade.php di dalam folder upload, pada view ini kita akan membuat form upload.

latihan_laravel/resources/views/upload/v_upload.blade.php :

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Membuat Upload File Dengan Laravel</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>

    <body>
        <div class="row">
            <div class="container">
                <h2 class="text-center my-5">Tutorial Membuat Upload File Dengan Laravel</h2>
                <div class="col-lg-8 mx-auto my-5">
                    @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            @foreach ($errors->all() as $error)
                                {{ $error }} <br />
                            @endforeach
                        </div>
                    @endif

                    <form action="/upload/proses" method="POST" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <b>File Gambar</b><br />
                            <input type="file" name="file">
                        </div>

                        <div class="form-group">
                            <b>Keterangan</b>
                            <textarea class="form-control" name="keterangan"></textarea>
                        </div>

                        <input type="submit" value="Upload" class="btn btn-primary">
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Pada form upload di atas akan diproses pada route “/upload/proses” seperti yang kita buat pada routes sebelumnya, kemudian kita buat dengan method POST dan jangan lupa “enctype” nya karena enctype wajib di tuliskan jika kita ingin membuat upload file.

<form action="/upload/proses" method="POST" enctype="multipart/form-data">

Selanjutnya buat method prosesupload() yang akan memproses upload file tersebut, sehingga sintak pada UploadController.php seperti berikut :

<?php

namespace App\Http\Controllers;

use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Http\Request;

class UploadController extends Controller
{
    //Trait validator
    use ValidatesRequests;

    //method upload untuk memanggil tampilan halaman upload
    public function upload()
    {
        return view('upload');
    }

    //method prosesupload untuk proses upload
    public function prosesupload(Request $request)
    {
        $this->validate($request, [
            'file' => 'required',
            'keterangan' => 'required',
        ]);

        // menyimpan data file yang diupload ke variabel $file
        $file = $request->file('file');

        // nama file
        echo 'File Name: ' . $file->getClientOriginalName();
        echo '<br>';

        // ekstensi file
        echo 'File Extension: ' . $file->getClientOriginalExtension();
        echo '<br>';

        // real path
        echo 'File Real Path: ' . $file->getRealPath();
        echo '<br>';

        // ukuran file
        echo 'File Size: ' . $file->getSize();
        echo '<br>';

        // tipe mime
        echo 'File Mime Type: ' . $file->getMimeType();

        // isi dengan nama folder tempat kemana file diupload
        $tujuan_upload = 'data_file';
        
        // upload file
        $file->move($tujuan_upload, $file->getClientOriginalName());
    }
}

Perhatikan pada method prosesupload() yang sudah kita buat  pada controller UploadController.php. Pada method ini kita membuat form validasi agar form file dan form keterangan wajib diisi.

$this->validate($request, [
    'file' => 'required',
    'keterangan' => 'required',
]);

Pada Laravel 11 sintak di atas harus disertakan sintak use ValidatesRequests;. Di Laravel, use ValidatesRequests; adalah trait yang disertakan dalam controller untuk menyediakan metode validasi input dengan cara yang lebih sederhana.Trait ValidatesRequests memungkinkan kita untuk menggunakan metode $this->validate() langsung di dalam controller tanpa perlu memanggil Validator secara manual. use ValidatesRequests; harus diseratakan juga library :

use Illuminate\Foundation\Validation\ValidatesRequests;

 

Baca Juga  Include Dan Require Pada PHP

Selanjutnya kita tangkap data file yang diupload dengan fungsi berikut :

// menyimpan data file yang diupload ke variabel $file
$file = $request->file('file');

Data yang diupload kita simpan ke variabel $file, selanjutnya kita bisa langsung menampilkan informasi detail dari file yang diupload :

// nama file
echo 'File Name: ' . $file->getClientOriginalName();
echo '<br>';

// ekstensi file
echo 'File Extension: ' . $file->getClientOriginalExtension();
echo '<br>';

// real path
echo 'File Real Path: ' . $file->getRealPath();
echo '<br>';

// ukuran file
echo 'File Size: ' . $file->getSize();
echo '<br>';

// tipe mime
echo 'File Mime Type: ' . $file->getMimeType();

Pada tahap terakhir kita tetapkan sebuah nama folder tempat file yang diupload akan disimpan, pada contoh ini dengan nama folder “data_file”, maka isi nama foldernya pada variabel $tujuan_upload.

// isi dengan nama folder tempat kemana file diupload
$tujuan_upload = 'data_file';

// upload file
$file->move($tujuan_upload, $file->getClientOriginalName());

Selanjutnya fungsi move() di atas bertujuan untuk mengupload file ke folder tujuan yang kita tetapkan sebelumnya.

Untuk melihat hasilnya kita coba jalankan project dengan php artisan serve dan akses project dengan alamat localhost:8000/upload.

Pilih contoh ini file yang diupload merupakan file gambar dengan nama mobil dan berekstensi .jpg dengan keterangan Gambar mobil baru, selanjutnya klik upload.

Hasilnya akan tampil detail informasi tentang file yang kita upload, dimana informasi yang tampil sesuai dengan yang kita perintahkan pada method prosesupload() tadi.

Kita cek juga apakah gambar yang diupload tadi sudah tersimpan atau belum. Sebelumnya kita sudah tetapkan nama folder tempat gambar disimpan, yaitu “data_file”. Laravel telah membuatkan folder data_file secara otomatis dalam folder public (latihan_laravel/public).

Buka folder tersebut, maka file yang sudah kita upload akan tersimpan di folder tersebut.

 

Membuat Upload File Gambar Ke Database Dengan Laravel

Tutorial selanjutnya merupakan cara membuat upload file yang file nya akan kita batasi, misalnya kita hanya akan memperbolehkan file gambar yang diupload (.png, .jpg dan .jpeg). Nanti kita bisa sesuaikan sendiri dengan ekstensi yang akan kita izinkan, silahkan sesuaikan dengan kebutuhan.

Langkah pertama,  kita siapkan dulu table untuk menyimpan data gambar, di sini saya membuat table dengan nama “upload“, untuk membuat table gambar ini kita bisa membuatnya secara manual dengan kolum sebagai berikut :

  • idfile (int) (auto_increment) (primary key)
  • namafile (varchar)
  • keterangan (varchar)
  • updated_at (timestamp)
  • created_at (timestamp)
  • deleted_at (timestamp)

 

Konfigurasi Model Upload File

Selanjutnya buat model baru dengan nama UploadFileModel.php beserta dengan migrationnya :

php artisan make:model UploadFileModel -m

Selanjutnya buka model UploadFileModel.php, kita akan melakukan beberapa pengaturan seperti berikut :

latihan_laravel/Models/UploadFileModel.php :

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class UploadFileModel extends Model
{
    protected $table = "tbl_upload"; 
    protected $primaryKey = 'idfile';
    protected $dates = ['deleted_at'];
    protected $fillable = ['idfile','namafile','keterangan'];
}

Pada model UploadFileModel.php kita mengisi kolom idfile, namafile dan keterangan yang hanya boleh diisi pada table tbl_upload dengan protected $fillable.

Baca Juga  Tutorial Laravel #8 : CRUD pada Laravel dengan Query Builder

 

Konfigurasi Migration Upload File

Sekarang kita buka file migration yang sudah dibuat tadi bersamaan dengan model UploadModel, pada tutorial ini migration yang terbuat bernama 2025_02_02_031804_create_upload_file_models_table.php. Buka file tersebut dan ubah sintaknya menjadi seperi berikut :

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('tbl_upload', function (Blueprint $table) {
            $table->increments('idfile');
            $table->string('namafile');
            $table->string('keterangan');
            $table->timestamps();
            $table->softDeletes();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('tbl_upload');
    }
};

 

 

Konfigurasi Controller Upload File

Selanjutnya buat controller dengan nama UploadFileController.php.

php artisan make:controller UploadFileController

Isi file UploadFileController.php dengan sintak seperti berikut :

app/Http/Controllers/UploadFileController.php :

<?php

namespace App\Http\Controllers;

use App\Models\UploadFileModel;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Http\Request;

class UploadFileController extends Controller
{
    //Trait validator
    use ValidatesRequests;

    //METHODE UNTUK MENAMPILKAN HALAMAN UPLOAD
    public function uploadfile()
    {
        $uploadfile = UploadFileModel::get();
        return view('upload/v_uploadfile', ['var_uploadfile' => $uploadfile]);
    }

    //METHODE UNTUK PROSES UPLOAD
    public function prosesuploadfile(Request $request)
    {
        $this->validate($request, [
            'namafile' => 'required|file|image|mimes:jpeg,png,jpg|max:2048',
            'keterangan' => 'required',
        ]);

        // menyimpan data file yang diupload ke variabel $file
        $file = $request->file('namafile');
        $namafile = time() . "_" . $file->getClientOriginalName();

        // isi dengan nama folder tempat kemana file diupload
        $tujuanupload = 'Gambar';
        $file->move($tujuanupload, $namafile);

        // isi dengan nama file dan keterangan tempat database
        UploadFileModel::create([
            'namafile' => $namafile,
            'keterangan' => $request->keterangan,
        ]);
        
        //kembali ke halaman awal
        return redirect()->back();
    }
}

Perhatikan pada controller di atas, karena kita akan berurusan dengan table tbl_upload, maka kita panggil dulu model UploadFileModel.php nya.

use App\Models\UploadFileModel

 

Kemudian pada method uploadfile() kita ambil semua data pada table tbl_upload dan kita passing ke view v_uploadfile.blade.php yang ada dalam foler upload.

public function upload()
{
    $uploadfile = UploadFileModel::get();
    return view('upload/v_uploadfile', ['var_uploadfile' => $uploadfile]);
}

 

Pada method prosesuploadfile() kita upload filenya dan kita simpan nama file dan keterangan yang diinput pada form sebelumnya.

//METHODE UNTUK PROSES UPLOAD
public function prosesuploadfile(Request $request)
{
    $this->validate($request, [
        'namafile' => 'required|file|image|mimes:jpeg,png,jpg|max:2048',
        'keterangan' => 'required',
    ]);

    // menyimpan data file yang diupload ke variabel $file
    $file = $request->file('namafile');
    $namafile = time() . "_" . $file->getClientOriginalName();

    // isi dengan nama folder tempat kemana file diupload
    $tujuanupload = 'Gambar';
    $file->move($tujuanupload, $namafile);

    // isi dengan nama file dan keterangan tempat database
    UploadFileModel::create([
        'namafile' => $namafile,
        'keterangan' => $request->keterangan,
    ]);
    
    //kembali ke halaman awal
    return redirect()->back();
}

Perhatikan pada bagian validation di atas, untuk membuat validasi file upload, kita bisa menambahkan dengan “file|image|mimes:jpeg,png,jpg” agar hanya ekstensi tersebut yang diizinkan dan bisa menambahkan “max:” untuk membuat batas maksimal file yang boleh diupload.

Untuk method prosesuploadfile() kita harus menyertakan sintak :

 use ValidatesRequests;

Di Laravel, use ValidatesRequests; adalah trait yang disertakan dalam controller untuk menyediakan metode validasi input dengan cara yang lebih sederhana.Trait ValidatesRequests memungkinkan kita untuk menggunakan metode $this->validate() langsung di dalam controller tanpa perlu memanggil Validator secara manual. use ValidatesRequests; harus diseratakan juga library :

use Illuminate\Foundation\Validation\ValidatesRequests;

 

 

Konfigurasi Route Upload File

Buat route baru dengan sintak :

Route::get('/uploadfile', [UploadFileController::class,'uploadfile']);
Route::post('/uploadfile/proses', [UploadFileController::class,'prosesuploadfile']);

Perhatikan sintak di atas, pada saat alamat /uploadfile maka akan memanggil controller UploadFileController.php, dan controller UploadFileController.php akan memanggil method uploadfile().

Berikutnya pada saat alamat /uploadfile/proses maka akan memanggil controller UploadFileController.php, dan controller UploadFileController.php akan memanggil method prosesuploadfile().

 

 

Konfigurasi View Upload File

Selanjutnya buka view v_uploadfile.blade.php, buat view dengan sintak seperti berikut :

app/resources/views/upload/v_uploadfile.blade.php :

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Membuat Upload File Dengan Laravel</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>

    <body>
        <div class="row">
            <div class="container">
                <h2 class="text-center my-5">Tutorial Membuat Upload File Dengan Laravel</h2>
                <div class="col-lg-8 mx-auto my-5">
                    @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            @foreach ($errors->all() as $error)
                                {{ $error }} <br />
                            @endforeach
                        </div>
                    @endif

                    <form action="/uploadfile/proses" method="POST" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <b>File Gambar</b><br />
                            <input type="file" name="namafile">
                        </div>

                        <div class="form-group">
                            <b>Keterangan</b>
                            <textarea class="form-control" name="keterangan"></textarea>
                        </div>

                        <input type="submit" value="Upload" class="btn btn-primary">
                    </form>

                    <h4 class="my-5">Data</h4>
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th width="10%">Nama File</th>
                                <th>Keterangan</th>
                                <th width="10%">OPSI</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($var_uploadfile as $u)
                                <tr>
                                    <td><img width="150px" src="{{ url('/Gambar/' . $u->namafile) }}"></td>
                                    <td>{{ $u->keterangan }}</td>
                                    <td><a class="btn btn-danger" href="/uploadfile/hapus/{{ $u->idfile }}" onclick="return confirm('Yakin mau hapus file ?')">HAPUS</a></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

Sekarang kita lihat hasilnya dengan acara akses ke localhost:8000/uploadfile.

Baca Juga  Format Mata Uang dengan Directive Custom pada Laravel Blade

Di sini saya coba mengupload gambar Marc Marquez.jpg, dan memberi keterangan dengan “Marc Marquez”, klik upload, gambar berhasil tersimpan dan tampil.

 

 

Hapus File dengan Laravel

Pada tutorial laravel sebelumnya tentang membuat upload file ke database mysql dengan laravel, maka kita sudah punya form penginputan untuk upload file dan kita juga sudah menampilkan data dan gambar yang sudah diupload.

Perhatikan pada view v_uploadfile.blade.php yang sebelumnya sudah kita buat, disitu ada tombol untuk menghapus file :

<td><a class="btn btn-danger" href="/uploadfile/hapus/{{ $u->idfile }}">HAPUS</a></td>

Selanjutnya kita buat route baru pada web.php untuk proses penghapusan file, dengan sintak seperti berikut :

latihan_laravel/routes/web.php :

Route::get('/uploadfile/hapus/{idfile}', [UploadFileController::class,'hapusfile']);

Buat fungsi/method baru pada controllers UploadFileController.php :

//METHODE UNTUK HAPUS FILE 
public function hapusfile($idfile) 
{ 
    $file = UploadFileModel::find($idfile); 
    File::delete('Gambar/'.$file->namafile); 
    $file->delete(); return redirect()->back(); 
}

Pada method ini kita menangkap data idfile yang dikirim melalui url, yaitu idfile yang ingin dihapus. Kemudian kita ambil datanya dari table tbl_upload melalui model UploadFileModel.php. Kita ambil data file berdasarkan idfile karena kita butuh namafile pada record data ini.

Setelah kita memiliki nama file nya,  maka kemudian kita hapus menggunakan fungsi delete() yang berasal dari class File pada laravel.

Upload file yang kita buat akan tersimpan dalam folder “Gambar” dalam folder “public“, karena segala sesuatu yang berhubungan dengan file di laravel, folder public selalu menjadi prioritas.

Karena kita menggunakan class File, maka kita wajib memanggilnya terlebih dulu.

use File;

Sehingga keseluruhan isi controller UploadFileController.php sekarang seperti berikut :

<?php

namespace App\Http\Controllers;

use App\Models\UploadFileModel;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Http\Request;

use File;

class UploadFileController extends Controller
{
    //Trait validator
    use ValidatesRequests;

    //METHODE UNTUK MENAMPILKAN HALAMAN UPLOAD
    public function uploadfile()
    {
        $uploadfile = UploadFileModel::get();
        return view('upload/v_uploadfile', ['var_uploadfile' => $uploadfile]);
    }

    //METHODE UNTUK PROSES UPLOAD
    public function prosesuploadfile(Request $request)
    {
        $this->validate($request, [
            'namafile' => 'required|file|image|mimes:jpeg,png,jpg|max:2048',
            'keterangan' => 'required',
        ]);

        // menyimpan data file yang diupload ke variabel $file
        $file = $request->file('namafile');
        $namafile = time() . "_" . $file->getClientOriginalName();

        // isi dengan nama folder tempat kemana file diupload
        $tujuanupload = 'Gambar';
        $file->move($tujuanupload, $namafile);

        // isi dengan nama file dan keterangan tempat database
        UploadFileModel::create([
            'namafile' => $namafile,
            'keterangan' => $request->keterangan,
        ]);
        
        //kembali ke halaman awal
        return redirect()->back();
    }

    //METHODE UNTUK HAPUS FILE 
    public function hapusfile($idfile) 
    { 
        $file = UploadFileModel::find($idfile); 
        File::delete('Gambar/'.$file->namafile); 
        $file->delete(); return redirect()->back(); 
    }
}

Bagian terakhir dari method hapusfile() ini kita mengalihkan halaman kembali ke halaman sebelumnya dengan fungsi redirect()->back().

Sekarang kita coba lihat hasilnya, dengan cara akses project kita dengan menjalankan php artisan serve, kemudian akses localhost:8000/uploadfile, coba klik HAPUS pada salah satu record data yang ada.

Tampilan data file gambar yang kita hapus sudah terhapus, sekarang kita cek juga pada folder Gambar, apakah gambar berhasil dihapus. Jika file gambar sudah tidak ada, berarti file gambar tersebut sudah terhapus.

Demikian tutorial Upload dan hapus file pada Laravel, jika ada pertanyaan silahkan tuliskan di komentar. Semoga bermanfaat.

Selanjutnya kita akan mempelajari tentang Membuat Login dan Register pada Laravel .

Related Post

Be the first to comment

Leave a Reply

Your email address will not be published.


*


error: Ga bisa dicopy