HTML5-запрос на перетаскивание загружен неправильно

Question

Я добавил форму перетаскивания на страницу - "нормальный" ввод файла, который запрашивает файл, который будет выбран, работает нормально (вся дополнительная разметка - это просто начальная загрузка), но при перетаскивании POST В запросе отсутствует информация о файле.

например

Запрос перетаскивания

------WebKitFormBoundaryJrgn7dns6QMhgKLZ
Content-Disposition: form-data; name="tmp_files[][uploaded_data]"; filename=""
Content-Type: application/octet-stream


------WebKitFormBoundaryJrgn7dns6QMhgKLZ--

Запрос на ввод файла

------WebKitFormBoundarynNBsaoDo4VMpbZUv
Content-Disposition: form-data; name="tmp_files[][uploaded_data]"; filename="test.jpg"
Content-Type: image/jpeg


------WebKitFormBoundarynNBsaoDo4VMpbZUv--

HTML

<form id="upload_logo" action="/organisation/change_logo" method="POST" enctype="multipart/form-data">

    <div>
        <label class="control-label">Upload Logo</label>
        <div class="controls">
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <div class="input-append">
                    <div class="uneditable-input">
                        <i class="icon-file fileupload-exists"></i> 
                        <span class="fileupload-preview"></span>
                    </div>
                    <span class="btn btn-file">
                        <span class="fileupload-new">Select file</span>
                        <span class="fileupload-exists">Change</span>
                        <input type="file" id="fileselect" name="tmp_files[][uploaded_data]" class="default">
                    </span>
                    <a href="#" class="btn red fileupload-exists" data-dismiss="fileupload">Remove <i class="icon-trash"></i></a>
                </div>
            </div>
        </div>
        <div id="filedrag">or drag and drop here</div>
    </div>
</form>

JS

(function() {

        // getElementById
        function $id(id) {
            return document.getElementById(id);
        }

        // file drag hover
        function FileDragHover(e) {
            e.stopPropagation();
            e.preventDefault();
            e.target.className = (e.type == "dragover" ? "hover" : "");
        }


        // file selection
        function FileSelectHandler(e) {

            // cancel event and hover styling
            FileDragHover(e);

            // fetch FileList object
            var files = e.target.files || e.dataTransfer.files;


            var formData = new FormData($('#upload_logo')[0]);

            $.ajax({           
                url: '/organisation/change_logo', 
                data: formData,
                type: "POST",
                async: false,
                contentType: false,
                processData: false,
                cache: false,           
                success: function(data) {

                    $('.invoice-logo-space').html(data);

                },
                error: function() {
                    alert('Upload failed, please refresh the page and try again.')
                }   
            });


        }


        // initialize
        function Init() {

            var fileselect = $id("fileselect"),
                filedrag = $id("filedrag");

            // file select
            fileselect.addEventListener("change", FileSelectHandler, false);

            // is XHR2 available?
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {

                // file drop
                filedrag.addEventListener("dragover", FileDragHover, false);
                filedrag.addEventListener("dragleave", FileDragHover, false);
                filedrag.addEventListener("drop", FileSelectHandler, false);
                filedrag.style.display = "block";

            }

        }

        // call initialization file
        if (window.File && window.FileList && window.FileReader) {
            Init();
        }


    })();

Я не могу понять, что я мог сделать неправильно, я уверен, что у меня все работало с перетаскиванием, а затем я играл со стилями и настраивал код и, похоже, нарушил функциональность перетаскивания.

Answer 1

Нашел, что я делаю не так.

Измените эти строки:

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

var formData = new FormData($('#upload_logo')[0]);

чтобы:

var formData = new FormData();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

for (var i = 0; i < files.length; i++) {
    formData.append('tmp_files[][uploaded_data]', files[i]);
}