XMLHttpRequest ::ERR_CONNECTION_RESET while uploading large (2 Mo & More) files

Question

Problem

I'm trying to upload file using XMLHttpRequest and it seems to work only with small file (such as under 2MO of size). I tried many things so far and came to code shown at the end of the post. But, there is nothing to do; I keep getting the ::ERR_CONNECTION_RESET error. It is not a code issue as under 2MO files are getting unploaded correctly... What am I forgetting? I know this is probably a IIS or web.config issues but I can put my finger on it by googling this problem.

Error given by Chrome

POST WEBSITEANDSERVICEURL/Service/MyService.asmx/UploadFilesWithAJAX net::ERR_CONNECTION_RESET

• handleFileSelect
• x.event.dispatch
• v.handle

Javascript

<script type="text/javascript">
    $(function() {
        $('#<%= files.ClientID %>').change(handleFileSelect);
    });

    function handleFileSelect(e) {
        if (!e.target.files || !window.FileReader) return;

        var fd = new FormData();
        var file = document.getElementById("<%= files.ClientID %>");
        for (var i = 0; i < file.files.length; i++) {
            fd.append('_file', file.files[i]);
        }
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '<%= ResolveURL("~/Services/MyService.asmx/UploadFilesWithAJAX") %>', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
            }
        };
        xhr.upload.addEventListener("progress", updateProgress, false);
        xhr.send(fd);
    }

    function updateProgress(oEvent) {
        if (oEvent.lengthComputable) {
            var percentComplete = oEvent.loaded / oEvent.total;
            $("#progress").text(oEvent.loaded + " ON " + oEvent.total);
        }
    }
</script>

HTML Markup

<asp:FileUpload ID="files" runat="server" multiple="true" />
<br />
<table id="selectedFiles">
</table>
<span id="progress"></span>

MyService.asmx

<ScriptService()> _
<ToolboxItem(False)> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class AJAXServices : Inherits WebService
    <WebMethod(EnableSession:=True)> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
    Public Function UploadFilesWithAJAX()
        ' Some code which work fine, I'm sure of it.
    End Function
End Class

Web.config

<!-- [...] -->
<system.web>
    <httpRuntime maxRequestLength="2097151" executionTimeout="180" /><!-- MAXIMUM DURING TESTING -->
    <!-- [...] -->
</system.web>
<!-- [...] -->

Answer 1

Ok, I solved it...

Solution

If this happen to someone else, be sure to at least access to Context.Request.Files once in your WebService.

Because, during my tests, I was simply :

Public Function UploadFilesWithAJAX()
    Return "RETURN SOMETHING"
End Function

But it was not enough... If I only access to Context.Request.Files like :

 Public Function UploadFilesWithAJAX()
    Dim files = Context.Request.Files '<---- Simply adding this... make it works :|
    Return "RETURN SOMETHING"
End Function

It works. Hope it helps someone else.

By the way, if someone can explain me why it is working by doing this.

Answer 2

In your web config, you defined maxRequestLength="2097151" which is around 2mb, for this reason if you try to upload files more than 2mb it will fail eventually.

Example config below( it will allow up to 2gb )

<httpRuntime maxRequestLength="2048576000" executionTimeout="300" />