Using jquery file upload synchronous not working on drop

I'm using the plugin to display the image thumbnails and adding drag and drop to the page, then sending a form with other data.

When I click the button, select the images and submit the form, it display the thumbnails of the images that i have uploaded, and when the form is sended the input file show this:-

files":[{},{},{},{},{},{}] 

But when I drag and drop it still display the thumbnails of the images that i have droped, butg if i submit the form it won't work it show:-

files":[null]

This is the HTML

   <span class="btn btn-success fileinput-button">
     <i class="glyphicon glyphicon-plus"></i>
     <span>Add file...</span>
       <input id="fileupload" type="file" name="files[]" multiple>
   </span>
   <br>
   <br>
   <div id="files" class="files"></div>
   <br>

And this is the plugin's code

$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    $('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 999000,
        replaceFileInput: false,
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 300,
        previewMaxHeight: 300,
        previewCrop: true,
        autoUpload: false,
     }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').addClass('uploadedFile col-xs-12 col-md-6').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name))
                    .append("<span class=\"remove\"><i class=\"fa fa-times fa-2x\"></i></span>");
                    $(document).on('click','span.remove',function(){
                      $(this).parents('.uploadedFile').remove();
                    })
            if (!index) {
                node
                    .append('<br>');
            }
            node.appendTo(data.context);
        });
    })
    .prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

How can I make the drag and drop work?