CodeIgniter

Contoh Upload Gambar CodeIgniter 4

Tutorial upload gambar CodeIgniter 4 dengan validasi file, preview JavaScript, nama acak, Bootstrap, dan penyimpanan aman di folder writable.

Contoh coding Contoh Upload Gambar CodeIgniter 4
Langkah 3 dari 9

Membuat Form Multipart dengan Bootstrap

Form upload wajib memakai enctype="multipart/form-data":

<form method="post"
  action="<?= site_url('upload-gambar') ?>"
  enctype="multipart/form-data"
  id="uploadForm">

  <?= csrf_field() ?>

  <label for="image" class="drop-zone" id="dropZone">
    <img id="preview" class="preview d-none" alt="Preview gambar">
    <span id="dropContent">
      <strong>Tarik gambar atau klik untuk memilih</strong>
      <small>JPG, PNG, WebP · maksimal 2 MB</small>
    </span>
  </label>

  <input id="image" name="image" type="file"
    class="visually-hidden"
    accept="image/jpeg,image/png,image/webp" required>

  <button id="uploadButton" class="btn btn-primary"
    type="submit" disabled>Upload Gambar</button>
</form>

Atribut accept membantu file picker menampilkan format yang sesuai, tetapi tidak dianggap sebagai keamanan karena request dapat dibuat tanpa melalui form.