locked
Issues when uploading a large file(180M) to asp.net using ajax RRS feed

  • Question

  • User2021808833 posted

    Hi all,

    I have been working on this issue for 2 days, and thanks if you have any idea. 

    The requirement is to upload file to a asp.net web site, the code below is very typical way against the online sample which can be found. Except for that I need to upload a file about 200M.

    Javascript Code

    var fileUpload = $("#file_upload").get(0);
    var files = fileUpload.files;
    
    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
        data.append(files[i].name, files[i]);
    } 
    
    $.ajax({
                    xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = Math.round(((evt.loaded / evt.total) * 100));
                                $("#uploadImageProgressBar").width(percentComplete + '%');
                                $("#uploadImageProgressBar").html(percentComplete + '%');
                            }
                        }, false);
                        return xhr;
                    },
    
                    url: "Upload.ashx",
                    type: "POST",
                    timeout: 600000,
                    data: data,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
    
                    },
                    success: function (result) {
    
                    },
                    error: function (err) {
    
                    }
                });

    Upload.ashx.cs

    public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                context.Response.Charset = "utf-8";
    
                if (context.Request.Files.Count > 0)
                {
                    HttpPostedFile file = context.Request.Files[0];
                    file.SaveAs(myPath);
                }
            }

    Action #1

    a. Upload a file about 30M, the function works on Chrome and IE.

    b. Upload a file about 180M

    • The progress bar will stuck after some progress update on Chrome and IE, no progress report if add console.log() in the event (code marked blue)
    • The upload will success on Chrome at last, even the progress bar stuck.
    • The upload will fail on IE11 at last - "XMLHttpRequest: Network Error 0x2eff, Could not complete the operation due to error 00002eff."

    Action #2

    After some search online, try to use PUT rather than POST to upload data in the ajax call

    type: "PUT",

    When upload a file about 180M both on IE and Chrome

    • The progress bar works perfect 
    • The "405 / Method Not Allowed" is returned

    Action #3

    After some research again, the 405 error code of "PUT" fail is due to IIS does not configured for the aciton. Then add the following configuration in web.config

    	<handlers accessPolicy="Read, Script">
                <remove name="SimpleHandlerFactory-ISAPI-2.0" />
                <remove name="SimpleHandlerFactory-ISAPI-2.0-64" />
                <remove name="SimpleHandlerFactory-ISAPI-4.0_64bit" />
                <remove name="SimpleHandlerFactory-ISAPI-4.0_32bit" />
                <add name="SimpleHandlerFactory-ISAPI-4.0_32bit" path="*.ashx" verb="GET,HEAD,POST,PUT" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" resourceType="Unspecified" requireAccess="Script" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
                <add name="SimpleHandlerFactory-ISAPI-4.0_64bit" path="*.ashx" verb="GET,HEAD,POST,PUT" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" resourceType="Unspecified" requireAccess="Script" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
                <add name="SimpleHandlerFactory-ISAPI-2.0-64" path="*.ashx" verb="GET,HEAD,POST,PUT" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v2.0.50727\aspnet_isapi.dll" resourceType="Unspecified" requireAccess="Script" preCondition="classicMode,runtimeVersionv2.0,bitness64" responseBufferLimit="0" />
                <add name="SimpleHandlerFactory-ISAPI-2.0" path="*.ashx" verb="GET,HEAD,POST,PUT" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll" resourceType="Unspecified" requireAccess="Script" preCondition="classicMode,runtimeVersionv2.0,bitness32" responseBufferLimit="0" />
            </handlers>

    The upload a 180M file again on IE and Chrome, the behavior is exactly same as Action #1. Now it's been a circle!

    • The progress bar will stuck in the middle percent on Chrome and IE, no progress report if add console.log() in the event (code marked blue)
    • The upload will success on Chrome at last
    • The upload will fail on IE11 - XMLHttpRequest: Network Error 0x2eff, Could not complete the operation due to error 00002eff.

    So can anyone tell me what's wrong with my current solution? The expected behavior is on IE and Chrome, when upload the 180M file, the progress bar can work as expected, and finally the file could be uploaded to server (Status 200 returned).

    Or it is also appreciated if there is any other workable solution suggested.

    Thanks,

    Guohao

    Thursday, June 11, 2020 10:06 AM

Answers

All replies

  • User-474980206 posted

    the default asp.net file  upload handling is to buffer in memory. Check to see if your app is recycling due to memory size.

    Thursday, June 11, 2020 2:40 PM
  • User2021808833 posted

    Thanks Bruce for the reply.

    After another day of struggle, I have make it work. It seems to be to by design, the browser and server is not expected to transfer very large data in one post.

    Friday, June 12, 2020 8:30 AM
  • User2021808833 posted

    When client need to upload large file size to server, and show the progress. The solution is to slice the file to blob, then post using XMLHttpRequest and FormData, piece by piece.

    There are many framework can do this, like https://plugins.jquery.com/uploadfile/

    We can implement a light weight solution follow the way http://dotnetbull.com/2018/09/uploading-large-file-chunks-javascript-ajax-mvc-dotnet.html

    My project can't use jquery.uploadfile.js due to the design, and I have implemented one to send 1M per post, now it works good.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 12, 2020 8:39 AM