Contoh Upload Gambar CodeIgniter 4

Menampilkan Preview Gambar dengan JavaScript

Ambil file dan lakukan pemeriksaan awal:

const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
const maxBytes = 2 * 1024 * 1024;

function showPreview(file) {
  if (!file) return;

  if (!allowedTypes.includes(file.type) || file.size > maxBytes) {
    input.value = '';
    return;
  }

  previewUrl = URL.createObjectURL(file);
  preview.src = previewUrl;
  preview.classList.remove('d-none');
  uploadButton.disabled = false;
}

Ketika preview diganti, panggil URL.revokeObjectURL() untuk melepaskan object URL lama. Source unduhan juga mendukung drag-and-drop menggunakan DataTransfer.