In a frontend new custom post creation form, I’m trying to replace a normal input type file with dropzone, but it doesn’t upload the images to the server.
I have created a new div for dropping the files, and I have wrapped the previous input as a fallback inside my form:
<form id="new_post" name="new_post" method="post" action="#" class="dropzone" enctype="multipart/form-data">
<!-- other form fields here -->
<div class="dropzone-previews"></div>
<div class="fallback">
<input type="file" name="file[]" multiple="multiple" />
</div>
<input type="hidden" id="new_cpt_action" name="new_cpt_action" value="new_cpt" />
<input type="submit" value="submit" id="submit" name="submit" />
</form>
To make dropzone work with the code above, I have the following options in my script:
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#new_post").dropzone({
uploadMultiple: true,
addRemoveLinks: true,
previewsContainer: ".dropzone-previews",
});
});
When I click the submit button, the creation of the new post is triggered and everything works as expected, but the images are not uploaded and attached. The input type=”file” works perfectly, but dropzone doesn’t.
If the server is able to handle the files with a normal input, does anyone know I am missing on the dropzone option?
Many thanks!