PHP: Upload Multiple Files

Pada pertemuan sebelumnya, kita telah mempelajari cara upload file dengan php.

Kalau kita buka-buka lagi projek yang sebelumnya, kita pada akhirnya memang membuat form yang mengupload dua buah gambar, yaitu gambar untuk foto dan gambar untuk ktp.

Terus? Bukannya itu lebih dari satu file? Berarti multiple files dong?

Enggak juga. Itu tetep single file. Alias satu <input type="file"> hanya untuk satu file. Sedangkan upload multiple files itu, satu input-an bisa untuk lebih dari satu file, dengan cara:

Menambahkan atribut multiple pada tag <input> dan dengan
Dan mengubah name menjadi array, seperti ini:

<input
    type="file"
    name="listGambar[]"
    accept="image/*"
    multiple>

Pada kode html di atas, tag input memiliki:

Name listGambar[] yang berupa array (karena ada tanda kurung siku [])
Atribut multiple, yang memungkinkan user untuk memilih lebih dari satu file secara sekaligus.

Persiapan File

Langsung saja. Kita buat project-nya.

Kemudian buat dua file dengan struktur berikut:

upload-file/
├── form.html
└── proses.php

File form.html sebagai form-nya, dan file proses.php untuk menangani proses upload-nya.

Oiya, jangan lupa bikin ☕ dulu, ya! 😁

Membuat Form HTML

Selanjutnya kita buka file form.html, lalu tulis kode program seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Multiple Files PHP | Jago Ngoding</title>
</head>
<body>
    <h1>Upload Multiple Files PHP | Jago Ngoding</h1>
    <form action="proses.php" method="POST" enctype="multipart/form-data">
        <div>
            <label>Pilih gambar</label> <br>
            <input type="file" name="listGambar[]" accept="image/*" multiple>
        </div>

        <button style="margin-top: 2rem">Upload</button>
    </form>
</body>
</html>

Hal yang paling penting adalah:

Nama dari input file harus berupa array (yaitu dengan menambahkan kurung siku [])
Lalu menambahkan atribut multiple pada input file agar ia bisa menerima lebih dari satu file secara sekaligus.
Sisanya kurang lebih sama seperti pertemuan sebelumnya tentang upload single file.

Bentuk Data yang Dikirim Untuk Multiple Files

Seperti biasa, sebelum kita mulai proses upload file.

Kita akan terlebih dahulu membedah isi dari variabel super global $_FILES untuk kasus upload multiple files.

Pada file proses.php, tuliskan kode program berikut:

<?php

$files = $_FILES;

echo "<pre>";
print_r($files);
echo "</pre>";

Nantinya kode program di atas akan kita hapus.

1. Pilih Files

Langsung kita test drive.

Klik tombol Choose Files (jika bahasa inggris)
Lalu pilih lebih dari satu gambar dengan menekan tombol Ctrl atau Shift

Pada contoh ini saya memilih 2 buah file:
Setelah itu, akan ada informasi untuk berapa jumlah file yang telah kita pilih.

2. Submit

Langsung saja klik tombol Upload.

Kita akan mendapatkan hasil (kira-kira) seperti berikut:

Penjelasan

Pada variabel $_FILES, terdapat indeks dengan nama listGambar dengan tipe data array asosiatif.
$_FILES['listGambar'] bertipe data array (asosiatif) dengan atribut:
1. name - berisi informasi nama file
2. type - berisi informasi tipe file
3. tmp_name - berisi informasi lokasi tmp file pada server
4. error - berisi informasi tentang error upload
5. size - berisi informasi tentang ukuran file
Setiap atribut dari $_FILES['listGambar'] adalah array terindeks. Indeks 0 (pertama) untuk file pertama, dan indeks 1 (kedua) untuk file kedua.

Bikin Direktori assets/uploads

Okay, karena kita telah mengetahui bagaimana wujud struktur datanya, sekarang kita bisa hapus kode program pada file proses.php, lalu menggantinya dengan kode program di bawah:

<?php

$folderUpload = "./assets/uploads";

# periksa apakah folder tersedia
if (!is_dir($folderUpload)) {
    # jika tidak maka folder harus dibuat terlebih dahulu
    mkdir($folderUpload, 0777, $rekursif = true);
}

Penjelasan

Kode program di atas fungsinya sama saja seperti pada pertemuan sebelumnya, yaitu:

Untuk memeriksa apakah di dalam direktori projek kita, terdapat direktori assets/uploads atau tidak.
Jika tidak, maka kita akan membuat direktori tersebut dengan fungsi mkdir.

Tampilkan Nama File Yang Sudah Dipilih

Setelah itu, kita akan mulai mengupload (atau memindahkan file yang sudah terupload) ke dalam direktori assets/uploads.

Akan tetapi, pertama-tama kita harus tau terlebih dahulu:

berapa jumlah file yang terupload?
apa nama file yang terupload?
apa lokasi sementara (tmp) dari file tersebut?

<?php

...

$files = $_FILES;
$jumlahFile = count($files['listGambar']['name']);

for ($i = 0; $i < $jumlahFile; $i++) {
    $namaFile = $files['listGambar']['name'][$i];
    $lokasiTmp = $files['listGambar']['tmp_name'][$i];

    echo "nama: $namaFile, tmp: {$lokasiTmp} <br>";
}

Penjelasan

Nah, pada kode program di atas, kita telah:

Mengambil jumlah file dengan menghitung length dari array $files['listGambar']['name']. Kita bisa mengganti atribut name dengan yang lain seperti type, atau tmp_name dan hasilnya akan sama saja.
Melakukan perulangan dengan for sebanyak $jumlahFile.
Mengambil nama file dan juga lokasi tmp sesuai dengan indeks perulangan ($i).

Refresh dan kirim ulang file yang telah kita upload, maka kita akan mendapatkan output kira-kira seperti berikut:

Upload File

Karena kita sudah berhasil mendapatkan nama dan juga lokasi tmp, maka yang harus kita lakukan selanjutnya adalah memindah gambar tersebut dari lokasi tmp, ke lokasi baru.

Perhatikan kode program berikut:

<?php

...

for ($i = 0; $i < $jumlahFile; $i++) {
    $namaFile = $files['listGambar']['name'][$i];
    $lokasiTmp = $files['listGambar']['tmp_name'][$i];

    # kita tambahkan uniqid() agar nama gambar bersifat unik
    $namaBaru = uniqid() . '-' . $namaFile;
    $lokasiBaru = "{$folderUpload}/{$namaBaru}";
    $prosesUpload = move_uploaded_file($lokasiTmp, $lokasiBaru);

    # jika proses berhasil
    if ($prosesUpload) {
        echo "Upload file <a href='{$lokasiBaru}' target='_blank'>{$namaBaru}</a> berhasil. <br>";
    } else {
        echo "<span style='color: red'>Upload file {$namaFile} gagal</span> <br>";
    }
}

Coba jalankan kembali program, lalu upload beberapa file.

Jika tidak ada error apa pun, harusnya kita akan mendapatkan output kira-kira seperti berikut:

Kesimpulan

Bagaimana? Mudah sekali bukan? Perbedaan inti dari cara upload single file dengan upload multiple files hanya lah dari sisi sturktur data yang dikirim, dan juga dari atribut serta nama dari input file HTML yang kita buat.

Ada pun sisanya, maka secara umum sama saja.

Kode Program Lengkap

Untuk kode program lengkap, kalian bisa dapatkan di repository PHP Web Dinamis pada akun github jagongoding.

Jangan lupa kasih star ya!⭐🌟

Mengamankan Proses Upload File

Ini adalah contoh upload multiple file yang sangat sederhana. Tanpa validasi, tanpa simpan ke database. Tujuan intinya adalah agar kita paham bagaimana cara kerjanya dari yang paling dasar. Dan agar kita bisa memodifikasinya sendiri sesuai kebutuhan.

Ada pun pada pertemuan selanjutnya, insyaallah kita akan membahas tentang validasi dan cara mengamankan proses upload file pada PHP!

Stay tune!

Jangan lupa share ke teman-teman kalian, ya! Terima kasih banyak.