Используйте добавление форм-данных с @ HTML.BeginForm без вызова ajax

Question

То, чего я пытаюсь добиться, - это добавить файл к запросу на публикацию, который я получил из поля перетаскивания с помощью javascript. Проблема в том, что я не хочу читать все поля ввода и публиковать данные с помощью вызова ajax, я хочу использовать метод отправки по умолчанию из @HTML.BeginForm. Когда я делаю это, multipart на самом деле не содержит файл.

(Внимание: это работает, когда я просто отправляю файл или когда я читаю все поля ввода вручную и отправляю с отдельным ajax.)

Мой код: Drag & Drop js:

var file;
var isDragged = false;
var formData;
function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];

        formData = new FormData($("#form"));
        formData.append("File.PayLoad", file);
        formData.append("File.FileMetadataId", $('#File_FileMetadataId').val())
        formData.append("File.FileObjectId", $('#File_FileObjectId').val())      
   }
}

HTML:

  @using (Html.BeginForm("Edit", "DocumentTemplates", FormMethod.Post, new { role = "form", enctype = "multipart/form-data", id = "form" }))
    {
     @Html.AntiForgeryToken()
     <div class="row">
         <div class="col-xs-4">
             @Html.LabelFor(model => model.Language)
         </div>
         <div class="col-xs-8">
             @Html.HiddenFor(model => model.Language) @Html.DisplayFor(model => model.Language)
         </div>
     </div>
     <div class="row">
         <div class="col-xs-8">
             @Html.TextBoxFor(model => model.File.Payload, new { type = "file", @id = "browseFile", ondrop = "dropHandler(event);", ondragover = "dragOverHandler(event);" }) 
             @Html.ValidationMessageFor(model => model.File.Payload, null, new { @class = "text-danger" }) or Drag & Drop a File.
         </div>
     </div>
    }

Запрос в Fiddler с пустым именем файла:

-----------------------------7e27b381715d4
Content-Disposition: form-data; name="File.FileMetadataId"

44
-----------------------------7e27b381715d4
Content-Disposition: form-data; name="File.FileObjectId"

44
-----------------------------7e27b381715d4
Content-Disposition: form-data; name="File.Payload"; filename=""
Content-Type: application/octet-stream


-----------------------------7e27b381715d4--

UPDATE: Я обнаружил, что вы можете перезаписать файлы из файлового ввода, но только в Chrome. Поскольку мне нужно, чтобы он работал в IE 11, это мне не поможет, но, возможно, это поможет кому-то еще. Вам не нужно добавлять все поля формы, а просто установить тип входного файла в удаленный файл и отправить…

Answer 1

У вас там несколько проблем. Одной из проблем является код ниже. Вы пропустили один } в своем коде.

Если вы поставите его, как показано ниже, последнее значение просто сохраните в file, что неверно.

for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];
} // missing }

Если вы поставите его, как показано ниже, последнее значение просто сохраните в formData, что неверно.

function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];

    formData = new FormData($("#form"));
    formData.append("File.PayLoad", file);
    formData.append("File.FileMetadataId", $('#File_FileMetadataId').val());
    formData.append("File.FileObjectId", $('#File_FileObjectId').val());    
   }
} // missing }

Вторая проблема - ev.dataTransfer.files. Как вы можете видеть в Перетаскивание файла , лучше проверить ev.dataTransfer.items, иногда в нем есть ваши файлы, а ev.dataTransfer.files пусто.

Наконец, вы можете сделать это так:

function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();    

    formData = new FormData($("#form"));

    if (ev.dataTransfer.items) {
        // Use DataTransferItemList interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
            // If dropped items aren't files, reject them
            if (ev.dataTransfer.items[i].kind === 'file') {
                var file = ev.dataTransfer.items[i].getAsFile();
                formData.append("File.PayLoad" + i, file);
            }
        }
    } else {
        // Use DataTransfer interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
            file = ev.dataTransfer.files[i];
            formData.append("File.PayLoad" + i, file);
        }
    }
}