I've scoured through several SO and blog posts online but can't find something that works.
I'm trying to set up a simple HTML drag and drop form where users can upload several files at once via DropzoneJS.
HTML:
<form action='<?php echo url_for("@menu_basic_menu"); ?>' method="post" enctype="multipart/form-data" class="dropzone" id="basic_menu_dropzone"></form>
<button id="file_submit_btn" type="submit" form='basic_menu_dropzone' value="submit">SUBMIT</button>
Javascript:
jQuery(document).ready(function($) {
Dropzone.autoDiscover = false;
var dropzone = new Dropzone('#basic_menu_dropzone', {
paramName: 'files',
addRemoveLinks: true,
uploadMultiple: true,
autoProcessQueue: false,
});
$('#file_submit_btn').click(function() {
dropzone.processQueue();
});
});
Here you'll notice that I also set up a submit button such that we only start the upload process of the files on submit
PHP (snippet of actions.class.php):
public function executeBasicMenu(sfWebRequest $request) {
if ($request->isMethod('post')) {
print_r_tree($_FILES);
}
}
I have everything setup so that executeBasicMenu is properly fired on submit, but $_FILES always returns an empty array.
Notes:
- If I replace the dropzone form with a regular input type='file' tag then everything works, so my gut feeling is telling me my configuration with dropzone is wrong somewhere.
- I've stepped through the dropzone.js source code and it looks like right when it's about to send the data on line 1386: xhr.send(formData), formData is empty.
Any help is deeply appreciated!