Using dropzone to attach images to a post in the wordpress media library

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:

Read More
<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!

Related posts