dropzone.js and ajax call = empty $_FILE, $_POST - php

Question

I am trying to send form variables to PHP via AJAX and show the result in console.log. But the console shows always no value for data. I don´t know what's wrong. What I have so far:
Part of jQuery Code:
...
init: function() {
this.on('success', function(csvFile, json) {
// AJAX
$.ajax({
url : "tests.php",
type : "POST",
data : this.csvFile
}).done(function (data) {
// Bei Erfolg
console.log("Erfolgreich:" + data);
}).fail(function() {
// Bei Fehler
console.log("Fehler!");
}).always(function() {
// Immer
console.log("Beendet!");
});
});
Part of HTML Code:
<form action="tests.php" class="dropzone" id="myAwesomeDropzone">
<input type="text" name="testname" value="das bin ich"/>
</form>
PHP Code:
if(!empty($_FILES)){
$test = $_FILES['file']['tmp_name'];
echo test;
}
if(!empty($_POST)){
$test2 = $_POST['testname'];
echo $test2;
}

Answer 1

Your HTML code and PHP works fine (just need to fix "echo test" to "echo $test" in your tests.php). Dropzone automatically attach itself to anything with class "dropzone" and it will do ajax requests to your server after you select a file.
If you want to programmatically:
HTML
<div id="myDZ">
Drop your file
<input type="text" id="testname" name="testname" value="hello_world"/>
<button id="upload">upload</button>
</div>
jQuery:
<script type="text/javascript">
$("#upload").click(function(e){
myDZ.processQueue();
})
var myDZ = new Dropzone("#myDZ", {
url: "tests.php",
autoProcessQueue: false,
init: function(){
this.on('sending', function(xhr, fd1, fd2){
//append extra data here
fd2.append("testname", $("#testname").val());
});
this.on('success', function(file, responseText){
//do after successful upload
console.log(responseText);
})
}
});
</script>
you can remove "autoProcessQueue: false" and remove the button stuff if you want it to auto upload once a file is selected.
more events can be found here: http://www.dropzonejs.com/#event-list