vendredi 26 février 2016

XMLHttpRequest, Web API

i was searching for answer for a while however it look like it is working correctly for the others :-) . I have issue when uploading file. Everything working fine except progress bar. It is 100% before web api was even called so it probably uploading file somewhere in memory. When i am uploading video file (1 GB) i am waiting for few minutes and it looks like progress bar is working(but it is not uploaded anywhere) and after 100% it call my api and uploading again(but progress bar is already 100%). So i would like it call api when i will click button and shows progress correctly...I am not sure it will work this way but...

    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function (evt) {
        if (evt.lengthComputable) {
             setProgress(Math.round((evt.loaded / evt.total) * 100));
        }
    }

    //xhr.upload.onprogress = updateProgress;
    xhr.open('POST', form.action, true);
    xhr.onerror = errorHandler;

    xhr.onload = function () {

        if (this.status == 200) {

             ReloadMediaMeetings();
        };
    };
    xhr.send(formData);

One of many alternative i tried

$.ajax({

        xhr: function () {
            var xhr = $.ajaxSettings.xhr(); // also new XMLHttpRequest();
            xhr.onerror = errorHandler;
            xhr.upload.onprogress = updateProgress;

            return xhr;
        },
        type: 'POST',
        url: form.action, // api/upload
        contentType: false,
        processData: false,
        data: formData,
        success: function () {

        }
    });

C#

    public async Task<HttpResponseMessage> Upload()
    {
        var request = this.Request;

        if (!request.Content.IsMimeMultipartContent("form-data"))
        {
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.UnsupportedMediaType, "Invalid Request!");
            return response;
        }

        var streamProvider = new MultipartFormDataStreamProvider(uploadPath);

        try
        {
            await request.Content.ReadAsMultipartAsync(streamProvider)
                .ContinueWith(r =>
                   {
                       foreach (MultipartFileData fileData in streamProvider.FileData)
                       {
                           FileInfo fileInfo = new FileInfo(fileData.LocalFileName);
                           ContentDispositionHeaderValue disposition = fileData.Headers.ContentDisposition;
                           string fileName = (disposition != null && disposition.FileName != null) ? ParseFilename(disposition.FileName) : String.Empty;
                           //....
                           _logicProvider.UploadVideo(meeting, user);
                       }

                   });
                return request.CreateResponse(HttpStatusCode.OK);

        }
        catch (System.Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
        }
    }

Result is that video will be uploaded and all informations inserted in DB however user will wait for 5 min when progress bar already shows 100%. Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire