javascript - Ladda upp filer med flow.js + ng-flow till WebAPI 2

Jag försöker använda flow.js (https://github.com/flowjs/flow.js) via dess Angular-wrapper (https://github.com/flowjs/ng-flow/tree/master/samples/basic) för att ladda upp filer till en ASP.NET WebAPI 2-server. Hur som helst, när jag väljer en fil att ladda upp får min WebAPI bara den första chunk GET-förfrågan och sedan händer ingenting: ingen POST görs, och det verkar som om flow.js inte startade uppladdningen.

Den initiala GET som skickas när jag väljer en fil är:

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

Och svaret är:

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

Därefter utfärdas inga fler förfrågningar.

Eftersom det verkar inte finnas något uppdaterat WebAPI-exempel, utan bara utspridda inlägg, skapade jag för nybörjare som jag själv en dummy-reproduceringslösning som du kan ladda ner från http://1drv.ms/1CSF5jq: det är en ASP.NET WebAPI 2-lösning där jag placerade uppladdningskoden i hemvyn, efter att ha lagt till motsvarande API-kontroller. Tryck bara på F5 och försök ladda upp en fil. Du kan hitta API-kontrollern i UploadController.cs.

De relevanta koddelarna är:

a) klientsidan: en sida liknande snabbstartsexemplet på ng-flow-sidan:

<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>

Den motsvarande koden är i princip ett tomt TS-skelett med modulinitialiseringen:

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);
}

b) serversidan: Jag lade till lite bundling för de nödvändiga skripten, och följande kontroller, modifierad från exempelkoden jag hittade på Hur man laddar upp filer i delar i ASP.NET med ng-Flow. Observera att i GET Upload-metoden ändrade jag signaturen med en bindningsmodell (annars skulle vi få 404 eftersom routen inte matchades), och när delen inte hittas returnerar jag en 202 - Accepted-kod istället för 404, eftersom flow.js-dokumentationen säger att 200 motsvarar "Delen accepterades och är korrekt. Ingen uppladdning behövs igen", medan en 404 avbryter hela uppladdningen, och vilken annan kod som helst (som 202 här) talar om för uppladdaren att försöka igen.

[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
    }
}

Svar #1

200-status är inte den enda som anses vara en framgång. 201 och 202 är det också. Läs om alternativet successStatuses: https://github.com/flowjs/flow.js/blob/master/dist/flow.js#L91 Så den enda ändringen du behöver göra är att returnera en 204-status, vilket betyder Ingen innehåll.

Relaterade artiklar