Загрузка файлов с помощью flow.js + ng-flow в WebAPI 2

Question

Я пытаюсь использовать flow.js ( https://github.com/flowjs/flow.js) через свою угловую оболочку ( https://github.com/flowjs/ng-flow/tree/master/samples/basic) для загрузки файлов на сервер ASP.NET WebAPI 2. В любом случае, когда я выбираю файл для загрузки, мой WebAPI просто получает первый GET-запрос блока, а затем ничего не происходит: POST не выполняется, и кажется, что flow.js не начал загрузку.

Начальный GET срабатывает, когда я выбираю файл:

GET http://localhost:49330/api/upload?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=4751&flowTotalSize=4751&flowIdentifier=4751-ElmahMySqlsql&flowFilename=Elmah.MySql.sql&flowRelativePath=Elmah.MySql.sql&flowTotalChunks=1 HTTP/1.1
Host: localhost:49330
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36
Accept: */*
Referer: http://localhost:49330/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,it;q=0.6

И ответ:

HTTP/1.1 202 Accepted
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcUHJvamVjdHNcNDViXFRlc3RcVXBUZXN0XFVwVGVzdFxhcGlcdXBsb2Fk?=
X-Powered-By: ASP.NET
Date: Fri, 17 Apr 2015 08:02:56 GMT
Content-Length: 0

Тогда больше нет запросов.

Кажется, что нет актуального примера WebAPI, а только отдельные посты, я создал для таких новичков, как я, фиктивное решение для репро, которое вы можете скачать с http://1drv.ms/1CSF5jq: это ASP.NET WebAPI 2 Решение, в котором я разместил код загрузки на главном экране после добавления соответствующего контроллера API. Просто нажмите F5 и попробуйте загрузить файл. Вы можете найти контроллер API в UploadController.cs,

Соответствующие части кода:

а) сторона клиента: страница, похожая на пример быстрого запуска страницы ng-flow:

<div class="row">
    <div class="col-md-12">
        <div flow-init="{target: '/api/upload'}"
             flow-files-submitted="$flow.upload()"
             flow-file-success="$file.msg = $message">
            <input type="file" flow-btn />
            <ol>
                <li ng-repeat="file in $flow.files">{{file.name}}: {{file.msg}}</li>
            </ol>
        </div>
    </div>
</div>

Соответствующий код является по сути пустым каркасом TS с инициализацией модуля:

module Up {
    export interface IMainScope {
    }

    export class MainController {
        public static $inject = ["$scope"];
        constructor(private $scope: IMainScope) {
        }
    }

    var app = angular.module("app", ["flow"]);
    app.controller("mainController", MainController);
}

б) на стороне сервера: я добавил некоторые дополнения для необходимых сценариев и следующий контроллер, модифицированный из примера кода, который я нашел в разделе Как загрузить файл кусками в ASP.NET с помощью ng-Flow. Обратите внимание, что в GET Upload метод я изменил подпись, используя модель привязки (в противном случае мы получили бы 404, поскольку маршрут не был сопоставлен), и когда чанк не найден, я возвращаю 202 - Accepted код, а не 404, как указано в документации по flow.js, что 200 соответствует "Чанк был принят и исправлен. Нет необходимости повторно загружать", в то время как 404 отменяет всю загрузку, а любой другой код (например, 202 здесь) сообщает загрузчик, чтобы повторить попытку.

[RoutePrefix("api")]
public class UploadController : ApiController
{
    private readonly string _sRoot;

    public UploadController()
    {
        _sRoot = HostingEnvironment.MapPath("~/App_Data/Uploads");
    }

    [Route("upload"), AcceptVerbs("GET")]
    public IHttpActionResult Upload([FromUri] UploadBindingModel model)
    {
        if (IsChunkHere(model.FlowChunkNumber, model.FlowIdentifier)) return Ok();
        return ResponseMessage(new HttpResponseMessage(HttpStatusCode.Accepted));
    }

    [Route("upload"), AcceptVerbs("POST")]
    public async Task<IHttpActionResult> Upload()
    {
        // ensure that the request contains multipart/form-data
        if (!Request.Content.IsMimeMultipartContent())
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

        if (!Directory.Exists(_sRoot)) Directory.CreateDirectory(_sRoot);
        MultipartFormDataStreamProvider provider = 
            new MultipartFormDataStreamProvider(_sRoot);
        try
        {
            await Request.Content.ReadAsMultipartAsync(provider);
            int nChunkNumber = Convert.ToInt32(provider.FormData["flowChunkNumber"]);
            int nTotalChunks = Convert.ToInt32(provider.FormData["flowTotalChunks"]);
            string sIdentifier = provider.FormData["flowIdentifier"];
            string sFileName = provider.FormData["flowFilename"];

            // rename the generated file
            MultipartFileData chunk = provider.FileData[0]; // Only one file in multipart message
            RenameChunk(chunk, nChunkNumber, sIdentifier);

            // assemble chunks into single file if they're all here
            TryAssembleFile(sIdentifier, nTotalChunks, sFileName);

            return Ok();
        }
        catch (Exception ex)
        {
            return InternalServerError(ex);
        }
    }

    private string GetChunkFileName(int chunkNumber, string identifier)
    {
        return Path.Combine(_sRoot,
            String.Format(CultureInfo.InvariantCulture, "{0}_{1}",
                identifier, chunkNumber));
    }

    private void RenameChunk(MultipartFileData chunk, int chunkNumber, string identifier)
    {
        string sGeneratedFileName = chunk.LocalFileName;
        string sChunkFileName = GetChunkFileName(chunkNumber, identifier);
        if (File.Exists(sChunkFileName)) File.Delete(sChunkFileName);
        File.Move(sGeneratedFileName, sChunkFileName);
    }

    private string GetFileName(string identifier)
    {
        return Path.Combine(_sRoot, identifier);
    }

    private bool IsChunkHere(int chunkNumber, string identifier)
    {
        string sFileName = GetChunkFileName(chunkNumber, identifier);
        return File.Exists(sFileName);
    }

    private bool AreAllChunksHere(string identifier, int totalChunks)
    {
        for (int nChunkNumber = 1; nChunkNumber <= totalChunks; nChunkNumber++)
            if (!IsChunkHere(nChunkNumber, identifier)) return false;
        return true;
    }

    private void TryAssembleFile(string identifier, int totalChunks, string filename)
    {
        if (!AreAllChunksHere(identifier, totalChunks)) return;

        // create a single file
        string sConsolidatedFileName = GetFileName(identifier);
        using (Stream destStream = File.Create(sConsolidatedFileName, 15000))
        {
            for (int nChunkNumber = 1; nChunkNumber <= totalChunks; nChunkNumber++)
            {
                string sChunkFileName = GetChunkFileName(nChunkNumber, identifier);
                using (Stream sourceStream = File.OpenRead(sChunkFileName))
                {
                    sourceStream.CopyTo(destStream);
                }
            } //efor
            destStream.Close();
        }

        // rename consolidated with original name of upload
        // strip to filename if directory is specified (avoid cross-directory attack)
        filename = Path.GetFileName(filename);
        Debug.Assert(filename != null);

        string sRealFileName = Path.Combine(_sRoot, filename);
        if (File.Exists(filename)) File.Delete(sRealFileName);
        File.Move(sConsolidatedFileName, sRealFileName);

        // delete chunk files
        for (int nChunkNumber = 1; nChunkNumber <= totalChunks; nChunkNumber++)
        {
            string sChunkFileName = GetChunkFileName(nChunkNumber, identifier);
            File.Delete(sChunkFileName);
        } //efor
    }
}

Answer 1

200 статус не единственный считается успешным. 201 и 202 тоже. Читайте о варианте successStatuses: https://github.com/flowjs/flow.js/blob/master/dist/flow.js#L91 Таким образом, единственное, что вам нужно, это вернуть статус 204, что означает No Content,