javascriptjqueryjquery-file-uploadajaxformmalsup-ajax-form

jQuery ajaxForm plugin double file upload

So I have searched all internet for answer but nothing... The problem is that using ajaxForm malsup plugin it submits my files twice.

HTML: 

<form id="gallery" enctype="multipart/form-data" action="/upload-gallery.php" method="post">
<input name="images[]" type="file" multiple form="gallery" id="gallery-upload" accept=".jpg,.gif,.jpeg,.png"/>
<input type="submit" value="Upload" form="gallery" class="btn btn-white" />

JS: 

var options = {
    clearForm: true,
    beforeSend: function() {

    },
    uploadProgress: function(event, position, total, percentComplete) {
    },
    success: function(response) {
    },
    complete: function(response) {
    },
    error: function(){

    },
    target: $(".gallery-preview")
};
    $("#gallery").ajaxForm(options);

PHP:

var_dump($_FILES);

Response:

enter image description here

I even add this code to JS:

$('#gallery').on('submit', function(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });

but the result is the same. Whats wrong? Is the only way to take every second file in PHP?

Solution

  • I can reproduce the issue. It looks like the forms plugin doesn't support the form="gallery" attribute. Each input element (not just type="file") with the form attribute is being submitted twice, even if physically outside of the form.