upload otomatis

Bisa. Cara yang umum dipakai di aplikasi modern adalah auto upload setelah pengguna memilih file, tanpa tombol "Upload".

Misalnya Anda punya input:

<input type="file" id="foto" accept="image/*">

Lalu ketika file dipilih, JavaScript langsung mengirimkannya ke server.

HTML

<form id="formFoto" enctype="multipart/form-data">

    <input type="file"
           id="foto"
           name="foto"
           accept="image/*"
           hidden>

</form>

<button class="btn btn-primary"
        onclick="document.getElementById('foto').click()">
    <i class="bi bi-camera"></i>
    Ganti Foto
</button>

---

Javascript Auto Upload

document.getElementById('foto')
.addEventListener('change', function(){

    let file = this.files[0];

    if(!file) return;

    let formData = new FormData();
    formData.append('foto', file);

    fetch('upload-foto.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {

        if(data.success){

            alert('Foto berhasil diupload');

            // Update preview foto
            document.getElementById('fotoProfil').src =
                data.url + '?t=' + Date.now();

        }

    });

});

---

PHP Upload

<?php

$response = [
    'success' => false
];

if(isset($_FILES['foto'])){

    $namaFile = time() . '_' . $_FILES['foto']['name'];

    move_uploaded_file(
        $_FILES['foto']['tmp_name'],
        'uploads/' . $namaFile
    );

    $response['success'] = true;
    $response['url'] = 'uploads/' . $namaFile;
}

echo json_encode($response);

---

Preview Sebelum Upload

Kalau ingin seperti Instagram atau WhatsApp:

document.getElementById('foto')
.addEventListener('change', function(){

    let file = this.files[0];

    if(file){

        let url = URL.createObjectURL(file);

        document.getElementById('fotoProfil').src = url;

        uploadFoto(file);

    }

});

Dengan cara ini:

1. Klik foto profil 📷
2. Pilih gambar dari galeri
3. Preview langsung berubah
4. File langsung terupload ke server
5. Tidak perlu tombol Upload

---

Untuk Smartphone (Rekomendasi)

Jika ingin saat diklik langsung membuka kamera HP:

<input type="file"
       id="foto"
       accept="image/*"
       capture="environment"
       hidden>

atau

<input type="file"
       id="foto"
       accept="image/*"
       capture="user"
       hidden>

• capture="user" → kamera depan (selfie)
• capture="environment" → kamera belakang

Kombinasi yang sering dipakai aplikasi modern adalah:

<input type="file"
       id="foto"
       accept="image/*"
       hidden>

Lalu tampilkan modal:

📷 Ambil Foto
🖼️ Pilih dari Galeri
🗑️ Hapus Foto

Sehingga pengalaman pengguna terasa seperti WhatsApp atau Instagram.