Tutorial Laravel #17 : Upload dan Hapus File pada Laravel

Agus Suratna

4 years ago

Daftar Isi

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 https://agussuratna.net/2020/11/27/cara-install-laravel-8-di-windows/.

Untuk mulai membuat contoh upload file dengan laravel, 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@upload');
Route::post('/upload/proses', 'UploadController@prosesupload');

Pertama kita buat route dengan nama ‘/upload’, agar menjalankan method upload() pada controller UploadController.php.

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

Selanjutnya kita buat sebuah controller baru dengan nama UploadController.php, yang sesuai dengan controller yang kita tuliskan pada route di atas tadi.

Untuk membuat controllernya kita bisa gunakan perintah php artisan seperti berikut :

php artisan make:controller UploadController

Selanjutnya kita buka file controller tersebut dan buat method upload() dan method prosesupload() seperti berikut :

latihan_laravel/app/Http/Controllers/UploadController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    public function upload()
    {
        return view('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 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 upload.blade.php, pada view ini kita akan membuat form upload.

latihan_laravel/resources/views/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 perhatikan pada method prosesupload() yang sudah kita buat sebelumnya pada controller UploadController.php.

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());
}

Pada method ini kita membuat form validasi agar form file dan form keterangan wajib diisi. 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';
$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

Selanjutnya buat model baru dengan nama UploadModel.php :

php artisan make:model UploadModel

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

latihan_laravel/Models/UploadModel.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class UploadModel extends Model
{
    use HasFactory;
    protected $table        = "upload";
    protected $primaryKey   = 'idfile';
    protected $fillable     = ['idfile','namafile','keterangan'];
}

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

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

app/resources/views/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 ($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 }}">HAPUS</a></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

Selanjutnya buat controller dengan nama UploadFileController.php.

php artisan make:controller UploadFileController

app/Http/Controllers/UploadFileController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\UploadModel;

class UploadFileController extends Controller
{
    //METHODE UNTUK MENAMPILKAN HALAMAN UPLOAD
    public function upload()
    {
        $uploadfile = UploadModel::get();
        return view('v_uploadfile', ['uploadfile' => $uploadfile]);
    }


    //METHODE UNTUK PROSES UPLOAD
    public function prosesupload(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
        UploadModel::create([
            'namafile' => $namafile,
            'keterangan' => $request->keterangan,
        ]);

        //kembali ke halaman awal
        return redirect()->back();
    }
}

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

use App\Models\UploadModel

Kemudian pada method upload() kita ambil semua data pada table upload dan kita passing ke view v_uploadfile.blade.php.

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

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

//METHODE UNTUK PROSES UPLOAD
public function prosesupload(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
    UploadModel::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.

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

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, sehingga route pada web.php jadi seperti berikut :

latihan_laravel/routes/web.php

Route::get('/uploadfile', 'UploadFileController@upload');
Route::post('/uploadfile/proses', 'UploadFileController@prosesupload');
Route::get('/uploadfile/hapus/{idfile}', 'UploadFileController@hapus');

Buat fungsi baru pada controllers UploadFileController.php :

//METHODE UNTUK HAPUS FILE
public function hapus($idfile)
{
    $file = UploadModel::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 upload melalui model UploadModel.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 Illuminate\Http\Request;
use App\Models\UploadModel;

use File;

class UploadFileController extends Controller
{
    //METHODE UNTUK MENAMPILKAN HALAMAN UPLOAD
    public function upload()
    {
        $uploadfile = UploadModel::get();
        return view('v_uploadfile', ['uploadfile' => $uploadfile]);
    }


    //METHODE UNTUK PROSES UPLOAD
    public function prosesupload(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
        UploadModel::create([
            'namafile' => $namafile,
            'keterangan' => $request->keterangan,
        ]);

        //kembali ke halaman awal
        return redirect()->back();
    }
    

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

Bagian terakhir dari method hapus() 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.