Use single request for both data and file submission to server - php

Question

A dropzone js need to create a new form but I want to use the same form to post both data and image, how can I achieve this, any idea.
<form method="POST" enctype="multipart/form-data">
<input type="text" name="name" id="name">
<!-- how to replace this field with dropzone but in this form in order to use the same ajax as below -->
<input type="file" name="photo" id="photo">
<button type="submit">send</button>
</form>
$("form").on('submit', function(e) {
$.ajax({
url: 'add.php',
type: 'POST',
data: new FormData(this),
dataType: 'JSON',
contentType: false,
cache: false,
processData: false,
}).done(function(data) {
if (data.success == false) {
if (data.errors.name) {
$('#name').append('<span class="text-danger">' + data.errors.name + '</span>');
}
if (data.errors.photo) {
$('#photo').append('<span class="text-danger">' + data.errors.photo + '</span>');
}
}
});
e.preventDefault();
});

Answer 1

You need to append dropzone files separately to FormData. Here is my solution,
$(document).ready(function () {
// get a reference to photo dropzone
var photoDropzone = Dropzone.forElement('#photo-dropzone');
$("form").submit(function (e) {
e.preventDefault();
// create the complete FormData here
var fd = new FormData(this);
// append dropzone files into the form data
for (var i = 0; i < photoDropzone.files.length; i++) {
fd.append('file[]', photoDropzone.files[i]);
}
$.ajax({
url: 'add.php',
type: 'POST',
data: fd,
dataType: 'JSON',
contentType: false,
cache: false,
processData: false,
}).done(function (data) {
console.log('done');
if (data.success == false) {
if (data.errors.name) {
$('#name').append('<span class="text-danger">' + data.errors.name + '</span>');
}
if (data.errors.photo) {
$('#photo').append('<span class="text-danger">' + data.errors.photo + '</span>');
}
}
});
});
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/basic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// prevent auto processing in dropzone configuration
Dropzone.options.photoDropzone = {
autoProcessQueue: false
};
</script>
<form method="POST" enctype="multipart/form-data">
<input type="text" name="name" id="name">
<button type="submit">send</button>
</form>
<!-- add dropzone form in the same page -->
<form action="add.php" class="dropzone" id="photo-dropzone">