Отправьте форму в конечную точку API и получите ответ в обратном вызове JavaScript - PullRequest
Новая
       9

Отправьте форму в конечную точку API и получите ответ в обратном вызове JavaScript

0 голосов
/ 02 января 2019

Вот мои текущие настройки для загрузки файла в мое веб-приложение:

HTML: 

<iframe name="myframe" id="frame1" class="hidden"></iframe>
<form target="myframe" method="post" enctype="multipart/form-data" action="/api/User/collection">
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
</form>

Контроллер: 

// POST api/user/collection
[HttpPost("collection")]
public ActionResult<IResponse> SetCollection(IFormFile file)
{
    var collection = fileDeflator.UnzipAndGetCollection(file);

    if (collection == null)
        return BadRequest(new BaseResponse("The collection file is invalid."));

    return base.SetUserCollection(collection);
}

Работает, кроме того, что тамобратная связь для клиента отсутствует.

Я бы предпочел, чтобы возвращаемый сервером JSON перехватывался в обратном вызове javascript на веб-странице (не в iframe) и анализировался для обновления раздела на странице..

Возможно ли это с характером form submit?

1 Ответ

0 голосов
/ 02 января 2019

Я закончил с тем, что работал, как хотел, с полезными ресурсами, которые предоставила Эми.

Вот решение: 

<form id="formSendCollection">
    <input type="file" id="fileCollection" name="fileCollection" />
    <span onclick="submitCollection();" class="button is-primary">Submit</span>
</form>

function submitCollection() {
    var fdata = new FormData();
    var fileCollection = document.getElementById('fileCollection').files[0];
    fdata.append("fileCollection", fileCollection);

    sendAjax('/api/User/Collection', fdata, function (body) {
        vueApp.modelUser.collection = JSON.parse(body);
    });
}

function sendAjax(url, body, callback) {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === XMLHttpRequest.DONE) {
            callback(xmlhttp.responseText);
        }
    };

    xmlhttp.open('POST', url, true);
    xmlhttp.send(body);
}
...