Upload File CodeIgniter

Upload File CodeIgniter

Pada tutorial sebelumnya kita sudah mengenal MVC pada CodeIgniter dan mencoba membuat CRUD, tetapi masih ada yang kurang, bagaimana cara mengupload file atau gambar pada CodeIgniter?

Gambar belum ada. Sehingga akan menampilkan broken image.

Gambar akan diisi dengan nilai default.jpg. Jika tidak ada gambar yang di-upload. Kalau kita lihat alamat path yang dipakai, gambar ini berlokasi di /upload/gambar/default.jpg. Sedangkan kita belum mempunyai folder gambar dan file default.jpg.

Bagaimana mengatasinya?

1. Kita buat folder baru di dalam project dengan nama upload, lalu di dalamnya buat folder lagi bernama gambar. Didalamnya kita simpan file default.jpg. Gambar default.jpg akan menjadi gambar placeholder jika tidak ada gambar yang di-upload.

Sebagai contoh, kita simpan gambar “No Image”.

Maka jika kita coba upload gambar hasilnya:

2. Membuat Fitur Upload pada CodeIgniter

Upload file mempunayi alur proeses seperti:

  1. User mengirim file melalui form
  2. File akan di-upload ke server dan disimpan dalam folder tmp dulu;
  3. Lalu kita pindahkan file yang ada di direktori tmp ke dalam direktori upload/gambar/ yang sudah dibuat
  4. Selesai.

Yang pertama buka model siswa_model.php, kemudian tambahkan method _uploadImage() di bawah method delete().

Contoh kode method _uploadImage():

private function _uploadImage()

{

    $config['upload_path']          = './upload/gambar/';

    $config['allowed_types']        = 'gif|jpg|png';

    $config['file_name']            = $this->product_id;

    $config['overwrite']                                  = true;

    $config['max_size']             = 1024; // 1MB

    // $config['max_width']            = 1024;

    // $config['max_height']           = 768;

 

    $this->load->library('upload', $config);

 

    if ($this->upload->do_upload('image')) {

        return $this->upload->data("file_name");

    }

   

    return "default.jpg";

}

Apa yang akan dilakukan kode method diatas?

1. Kita buat konfigurasi untuk upload file:

  • upload_path untuk menentukan lokasi file yang akan terupload
  • file_name untuk menentukan nama file yang kita ambil dari ID gambarnya. Karena itu, kita mengisinya dengan $this->gambar_id.
  • overwrite untuk menindih file yang sudah diupload. Saat di-upload file baru (edit data).
  • allowed_types untuk membatasi tipe file yang boleh di-upload.
  • max_size  menentukan batasan ukuran file.
  • max_wdith dan max_height  saya beri komentar agar tidak diaktifkan. Fungsinya untuk membatasi ukuran lebar dan tinggi gambar tersebut. Jika gambar yang diupload melebihi ukuran yang sudahditetapkan, maka upload akan gagal.

2. Me-load library upload dengan konfigurasi yang sudah ditentukan:

$this->load->library('upload', $config);

3. Menggunakan Method _uploadImage()

Khusus untuk method update(), kita buat pengecekan seperti ini:

if (!empty($_FILES["image"]["name"])) {

    $this->image = $this->_uploadImage();

} else {

    $this->image = $post["old_image"];

}

Artinya, jika ada file yang di-upload saat mengedit data, maka upload filenya. Jika tidak ada, cukup gunakan nama file yang sudah ada (old_image). Nilai old_image didapat dari form, karena pada edit_form.php kita sudah membuat field ini dengan tipe hidden.

4. Maka Hasilnya:

5. Cara menghapus file yang sudah diupload

Kita butuh sebuah method khusus untuk menghapus file yang telah diupload. Tambahkan method berikut pada class siswa_model, tepat di bawah method _uploadImage().

private function _deleteImage($id)

{

    $product = $this->getById($id);

    if ($product->image != "default.jpg") {

        $filename = explode(".", $product->image)[0];

        return array_map('unlink', glob(FCPATH."upload/product/$filename.*"));

    }

}

6. Panggil method _deleteImage() pada method delete().

private function _deleteImage($id)

            {

                $gallery = $this->getById($id);

                if ($gallery->image != "default.jpg") {

                    $filename = explode(".", $gallery->image)[0];

                    return array_map('unlink', glob(FCPATH."img/gallery/$filename.*"));

            }

Download Tutorial