Dropzone JS form data does not post to database - php

Question

I have used dropzone js inside a small form with couple of fields. I want to submit both images and form data all at once to the database. No errors can be seen in the logs and was searching all over the internet for a solution. I'm a newbie to PHP, so a bit of help would much appreciated.
Form
<form action="index.php" method="POST" class="form-horizontal" role="form">
<div class="form-group"></div>
<label for="name">Name :</label>
<input type="text" name="name" id="input-title" class="form-control">
<br><br>
<label for="description">Email:</label>
<input type="text" name="description" id="input-description" class="form-control">
<br><br>
<label for="File">File: </label>
<br><br>
<div class="dropzone dropzone-previews" name="File" id="my-awesome-dropzone"></div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
PHP Query
<?php
if( isset($_POST['submit']) && isset($_POST['name']) && isset($_POST['email']) && !empty($_FILES)){
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'mystore';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$name = $_POST['name'];
$email = $_POST['email'];
$targetDir = "upload/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO products (product_name,details,category, date_added) VALUES('".$name."','".$email."','".$fileName."','".date("Y-m-d H:i:s")."')");
}
}
else{
$error = "Fill All Details First !!";
if ( isset($_POST['submit']) && isset($error)) { echo $error; }
}
?>
Dropzone JS
<script type="text/javascript">
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
$("div#my-awesome-dropzone").dropzone({
url: "/file/post"
});
});
</script>

Answer 1

You must use something like this
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#my-awesome-dropzone", {
maxFiles: <?php echo $upload_file_number; ?>,
url: "remote/upload-file.php",
addRemoveLinks: true,
autoProcessQueue: false,
init: function() {
this.on("maxfilesexceeded", function(file){
//handle error for max file size
});
var submitButton = document.querySelector("#submit-button");
var id_import_xls;
var myDropzone = this;
submitButton.addEventListener("click", function(e){
/* HERE PUT THE AJAX FOR SUBMIT FORM AFTER SUBMIT UPLOAD THE FILE */
if (myDropzone.getUploadingFiles().length === 0 && myDropzone.getQueuedFiles().length === 0) {
//handle the error for no file selected if needed
}else{
//with this start upload
myDropzone.processQueue();
};
});//fine addEventListener
this.on("error", function(file, response) {
//handle the error
});
this.on("complete", function (file, response) {
//here can handle the success of upload
});
},
success: function(file, response){
//here can handle the success of upload
},
});