Ada sebuah elemen dari HTML FORM yang penampilannya menarik dan menggemaskan untuk mengunggah file yaitu Dropzone.JS.

multiple file dropzone ke php

Elemen Dropzone.JS ini saya gunakan ketika membuat sebuah aplikasi berbasis web bersama elemen FORM lainnya.

Aplikasi yang saya bangun menggunakan framework CodeIgniter.

Dropzone.JS memungkinkan kita mengunggah banyak (multiple) file sekaligus, juga tampilan preview-nya untuk file unggahan yang berbentuk gambar.

Artikel ini akan menunjukkan bagaimana caranya mengirimkan nama multiple file dari Dropzone JS ke PHP, dimana Dropzone.JS tersebut sebagai elemen kesatuan dari sebuah FORM, ke sebuah fungsi pengolah FORM di PHP Anda.

Mengirimkan multiple file Dropzone ke PHP

Pada dasarnya mengirimkan nama multiple file dari Dropzone.JS ke PHP cukup mudah.

Menempatkan elemen Dropzone.JS bisa Anda baca di situsnya di sini, juga jika Anda ingin mengunduh versi terbarunya.

Begitu Anda pilih file-file dan dijatuhkan di area Dropzone.JS, saat itulah file-file tersebut langsung diunggah ke server, tapi masih sebagai file sementara (temporary).

Anda bisa gunakan event-nya Dropzone.JS (dengan JQuery atau Javascript) begitu proses sending selesai, file temporary di server diganti namanya menjadi nama aslinya.

Akan saya tunjukkan di artikel ini.

Pada dasarnya di internet sudah banyak sekali ulasan mengenai cara pakai Dropzone.JS ini, karena elemen ini cukup populer.

Situasi saya

Artikel ini saya buat untuk berbagi trik, karena ternyata setelah mencari-cari solusi di pelbagai artikel di internet terkait Dropzone.JS, ternyata tidak ada yang benar-benar pas untuk situasi dan kebutuhan saya.

Berikut adalah contoh laman aplikasi yang saya miliki.

multiple file dropzone ke php

Tampak di atas sebuah area untuk mengunggah lampiran, Click or drop attachments here, nah itulah elemen Dropzone.JS.

Di area unggah lampiran tersebut, pengguna dapat mengirimkan banyak file dan mengganti-gantinya (remove) sesuka hati sebelum menekan tombol Send.

Elemen tersebut adalah bagian dari sebuah FORM, dimana saat pengguna menekan tombol Send, semua isian dari FORM tersebut akan dikirim ke aplikasi PHP.

Karena saya menggunakan framework CodeIgniter, mengirimkan nama multiple file dari Dropzone JS ke PHP ternyata tidak bisa. Nama-nama file yang diuanggah tidak dapat dikenali oleh fungsi do_upload().

Padahal nama-nama file yang diunggah itu, saat FORM SUBMIT akan disimpan di suatu tabel dengan sebuah ID yang sama dengan elemen form lainnya.

Tantangannya adalah bagaimana membawa nama-nama file yang diunggah melalui Dropzone.JS, yaitu dalam bentuk array, dapat dikenali sebagai elemen FORM.

Berikut adalah trik yang saya lakukan.

View

Perhatikan bentuk FORM yang saya gunakan sebagai berikut.

<form action="mitra/detail" method="post">
<h4><i class="ti-link"></i> Attachment</h4>
<div id="lampiran02" class="dropzone">
     <div class="dz-message">
          <h3> Click or drop attachments here.</h3>
     </div>
     <!-- fallback -->
     <div class="fallback">
          <input name="file" type="file" multiple />
     </div>
</div>
<input type="hidden" name="attachment" >
<button type="submit" class="btn btn-success m-t-20" id="sendDetail"><i class="fa fa-envelope-o"></i> Send</button>
</form>

Tidak ada yang istimewa di potongan kode di atas karena bisa dibaca dari situsnya Dropzone.JS.

Selanjutnya adalah mengaktifkan Dropzone.JS dan membuatnya bekerja saat mengunggah atau menghapus file, yaitu dengan Javascript (JQuery dan AJAX).

Sekilas cara kerja Dropzone.JS

Perhatikan baris berikut, aktivasi Dropzone.JS secara minimum adalah seperti ini, sesuai arahan dari situsnya.

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

Dibutuhkan parameter url: “/file/post”. Parameter ini menunjukkan script PHP yang bertugas menangani kedatangan file ke server. Misalnya, saat file diunggah oleh pengguna, script PHP tersebut akan dipanggil oleh Dropzone dan melakukan tugas mengganti nama file dan memindahkannya ke suatu folder.

Sehingga ketika menggunakan elemen Dropzone.JS bersama elemen FORM lainnya maka akan melibatkan 2 script PHP untuk menerima input dari elemen FORM, satu dari FORM itu sendiri melalui atribut ACTION dan satunya lagi dari parameter Dropzone.JS.

Tantangannya adalah bagaimana kedua script PHP tersebut dapat saling berbagi data, yaitu saat SUBMIT FORM, script PHP FORM ini dapat menerima data dari script PHP Dropzone.

Javascript dan JQuery

Dropzone.autoDiscover = false
var lampiran01 = new Dropzone("#lampiran02", {
        url: 'mitra/attachments',
        maxFilesize: 2,
        method:"post",
        acceptedFiles: null,
        paramName:"userfile",
        addRemoveLinks:true,
        autoProcessQueue: true
});

Kode Javascript di atas adalah aktivasi Dropzone.JS yang ada di FORM kita. Perhatikan baris url: ‘mitra/attachments’. Itu memanggil fungsi attachment dari controller mitra yang bertugas mengganti nama file temporer menjadi nama yang sebenarnya.

Pokoknya setiap ada file yang sudah dipilih atau dijatuhkan di area Dropzone.JS, itu artinya langsung diberangkatkan ke server dan oleh
mitra/attachments langsung dirubah nama filenya.

Sayangnya di sini kita belum waktunya untuk menyimpan nama-nama file yang diunggah tersebut ke database karena antisipasi pengguna berubah pikiran dan mengganti dengan file yang lain.

Selanjutnya potongan kode Javascript berikutnya adalah:

$(function() {
    var lampireun = []
    var attachments = null

    lampiran01.on('sending', function(file) {
        lampireun.push(file.name)
        attachments = JSON.stringify(lampireun)
        $('input[name="attachment"]').val(attachments)
    })

Trik untuk mengirimkan nama multiple file dari Dropzone JS ke PHP pada potongan Javascript di atas adalah koentji-nya.

Saat event sending dari Dropzone.JS yang bekerja setiap sebuah file selesai dikirim (unggah) ke server, maka akan melaksanakan perintah Javascript di atas, yaitu :

  1. Memasukkan nama file ke dalam array bernama lampireun.
  2. Mengubah array lampireun menjadi format JSON yang di-string-kan.
  3. Memasukkan nilai string JSON tadi ke dalam elemen FORM yang bernama attachment.

Sampai sini semua tampaknya aman kecuali jika pengguna berubah pikiran dan membuang file yang sudah keburu diunggah dan menggantinya dengan file lain.

Lanjutkan dengan potongan kode Javascript berikut.

lampiran01.on('removedfile', function(file) {
        f = file.name
        $.post(
            'mitra/attachmentsDel',
            { f: file.name },
            function(data, status) {
                lampireun.splice( lampireun.indexOf(f), 1 );
                attachments = JSON.stringify(lampireun)
                $('input[name="attachment"]').val(attachments)
            }
        )
    })

Potongan kode Javascript di atas akan bekerja saat event removedfile dari Dropzone.JS yang akan melaksanakan:

  1. Memanggil fungsi mitra/attachmentsDel untuk menghapus file secara fisik dari server.
  2. Membuang nama file tersebut dari array.
  3. Memperbarui JSON string dari array tersebut.
  4. Menyimpan nilai JSON string ke dalam INPUT FORM yang bernama attachment.

Di atas adalah Javascript dan JQuery yang membantu mengirimkan nama multiple file dari Dropzone JS ke PHP.

Lanjutkan ke halaman selanjutnya untuk melihat fungsi dari controller yang dipanggil oleh Javascript di atas via mekanisme AJAX.