Masalah saya adalah saya harus menggabungkan formulir normal dengan dropzone.js untuk unggahan drag&drop. Setelah pengguna mengklik tombol kirim, maka permintaan ajax mengirimkan data ke skrip php jika ada nilai di input.
Tapi formulir asli saya memanggil fungsi onSave untuk memvalidasi data masukan. Jika saya mengirimkan formulir dengan kode di bawah ini, metode POST mengirim data dengan sempurna, tetapi onSave tidak dipanggil. Jadi tidak terjadi apa-apa.
Bagaimana cara mengubah kode untuk memanggil onSave juga, setelah mengunggah file?
<?php
function onSave(){
//validate and save to database
}
?>
<form method="POST" action="item/create" accept-charset="UTF-8" data-request="onSave" class="dropzone" enctype="multipart/form-data" id="mydropzone">
//inputs
<div id="dropzonePreview" class="dropzone dropzonePreview">
<div class="dz-default dz-message"><button class="dz-button" type="button">Drop files here to upload</button></div>
</div>
//more inputs
<button type="submit" class="btn btn-success save">Send</button>
</form>
<script type="text/javascript">
Dropzone.autoDiscover = false;
$( document ).ready(function () {
Dropzone.autoDiscover = false;
$("#mydropzone").dropzone({
autoProcessQueue: false,
uploadMultiple: true,
previewsContainer: '#dropzonePreview',
clickable: false,
accept: function(file, done) {
console.log("uploaded");
done();
},
error: function(file, msg){
alert(msg);
},
// The setting up of the dropzone
init: function() {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
//it's send form, but not call onSave function
});
}
});
});
</script>
