Jquery / Ajax Drag and Drop File Uploader Not Submitting Files

Question

I have a drag and drop file uploader from this tutorial. The user can either click a button to choose files, or drag and drop. Either way, image previews are displayed, and then the images are uploaded when the form is submitted.

Choosing the files the old fashioned way works fine - the image previews are displayed and they are uploaded on form submission

But if I drag and drop an image, the previews are displayed, but when I submit the form they're not uploaded.

Code below:

 var isAdvancedUpload = function() { var div = document.createElement('div'); return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window; }(); var $form = $('ui form'); var $fileBox = $('.box'); var $input = $fileBox.find('input[type="file"]'), $label = $fileBox.find('label'); showFiles = function(files) { $label.text(files.length > 1 ? ($input.attr('data-multiple-caption') || '').replace('{count}', files.length) : files[0].name); }; if (isAdvancedUpload) { var droppedFiles = false; $fileBox.addClass('has-advanced-upload'); $fileBox.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) { e.preventDefault(); e.stopPropagation(); }); $fileBox.on('dragover dragenter', function() { $fileBox.addClass('is-dragover'); }); $fileBox.on('dragleave dragend drop', function() { $fileBox.removeClass('is-dragover'); }); $fileBox.on('drop', function(e) { droppedFiles = e.originalEvent.dataTransfer.files; var $imgDiv = $('.selected-images'); $.each(droppedFiles, function(index, file) { var img = document.createElement('img'); img.onload = function() { window.URL.revokeObjectURL($.src); }; img.height = 100; img.src = window.URL.createObjectURL(file); $imgDiv.append(img); showFiles(droppedFiles); }); }); } $form.on('submit', function(e) { if ($fileBox.hasClass('is-uploading')) return false; $fileBox.addClass('is-uploading').removeClass('is-error'); if (isAdvancedUpload) { e.preventDefault(); var ajaxData = new FormData($form.get(0)); if (droppedFiles) { $.each(droppedFiles, function(i, file) { ajaxData.append($input.attr('name'), file); }); } $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: ajaxData, dataType: 'json', cache: false, contentType: false, processData: false, complete: function() { $fileBox.removeClass('is-uploading'); }, success: function(data) { $fileBox.addClass(data.success == true ? 'is-success' : 'is-error'); if (!data.success) $errorMsg.text(data.error); }, error: function() { console.log(data.error); } }); } else { var iframeName = 'uploadiframe' + new Date().getTime(); $iframe = $('<iframe name="' + iframeName + '" style="display: none;"></iframe>'); $('body').append($iframe); $form.attr('target', iframeName); $iframe.one('load', function() { var data = JSON.parse($iframe.contents().find('body').text()); $form .removeClass('is-uploading') .addClass(data.success == true ? 'is-success' : 'is-error') .removeAttr('target'); if (!data.success) $errorMsg.text(data.error); $form.removeAttr('target'); $iframe.remove(); }); }; }); $input.on('change', function(e) { showFiles(e.target.files); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="ui form" action="/signup" method="post" enctype="multipart/form-data"> <!-- text inputs --> <div class="field"> <div class="box box__input"> <input class="box__file" type="file" name="photos" id="file" data-multiple-caption="{count} files selected" multiple /> <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label> <button class="box__button" type="submit">Upload</button> </div> <div class="box__uploading">Uploading&hellip;</div> <div class="box__success">Done!</div> <div class="box__error">Error! <span></span>.</div> </div> <!-- text inputs --> </form> 

Answer 1

I was also running into this issue. Found the solution finally.

This is because when files are dropped, the drop event is only showing the file info but are not set in the file input control . So, the file input remains empty (or has the selected files if selected manually earlier).

So, when form is submitted it only submits the selected files via manual method or empty.

To set the selected files in the file input set the files property of the file input control in drop event.

$("#file").prop("files", droppedFiles);

Drag-and-drop file uploading without AJAX, synchronously in the foreground?

Thanks to the above answer, i attempted it. Somehow i had the idea that the property files is read only, hence i was not trying it.