How to detect file size limits early when uploading with AJAX?

Question

I have an ASP.Net MVC web application that needs to handle file uploading with progress.

To achieve this I have created a custom IHttpHandler that process the file stream in chunks using the ProcessRequest method. The implementation of this is not important for my issue.

Client side I am using JQuery to upload the file with the AJAX function, something like this:

$.ajax({
    url: '@Url.RouteUrl("Uploads")',
    type: 'POST',
    headers: { 'Filename': file.name },
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    xhr: function () {
        var myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload) {
            myXhr.upload.addEventListener('progress', function (e) {
                if (e.lengthComputable) {
                    $('progress').attr({
                        value: e.loaded,
                        max: e.total,
                    });
                }
            }, false);
        }
        myXhr.addEventListener('load', function (e) {
            console.log('upload complete');
        });
        return myXhr;
    }
});

I have configured the upload/request limits in the web.config to allow files up to 2GB, which as far as I can tell is a hard limit in IIS anyway.

Problem

The problem I have is that when a user tries to upload a file larger than the limit it doesn't throw an error until the whole file has been transferred, which can take a few minute for large files. The is an undesired user experience for the user to have to wait for the transfer to complete before being told it cannot be processed.

Question

So my question is, is there anyway to get the ajax function to error as soon as the upload starts in the event the file is too large? Ideally I don't want the file to be sent to the server if it's only going to be rejected anyway.

Additional Information

For additional info, a breakpoint in the IHttpHandler code is only ever hit when the file size is within the limit, so I can't do anything in there to throw an error.

Note that I am not looking for a solution that involves checking the file size using javascript on the client size. Although I will probably use this as a user friendly precaution anyway, I want to find a method that causing the upload process to fail and abort before all the data is sent. I am however open to client side changes that don't rely on file size checking, for example alternate option for the ajax function.

I have also tried playing around with Application_BeginRequest() but this doesn't get called if the file is larger than 2GB, and I am not sure there is another event that I can check that happens before this.

Why you don't check file size before call ajax. You can check file size like [this example](https://stackoverflow.com/questions/1601455/how-to-check-file-input-size-with-jquery) — Minh Nguyen, Apr 23 '19 at 09:00
@MinhNguyen: Yeah, it's an option I have consider, and I will probably also do something like that anyway. However, I would still like to find out if another solution can be found without relying on client side checks. Basically, I wan't to know if I can force the request to stop sending the data if it's only going to throw an error at the end anyway — musefan, Apr 23 '19 at 09:09

score 0 · Answer 1 · answered Apr 23 '19 at 11:57

You can check your formData size before call your ajax.

var size = formData.get('fileName_key').size  // calculate your size accordingly

if(size>your_2gb_size) return false;

    $.ajax({
        url: '@Url.RouteUrl("Uploads")',
        type: 'POST',
        headers: { 'Filename': file.name },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                }, false);
            }
            myXhr.addEventListener('load', function (e) {
                console.log('upload complete');
            });
            return myXhr;
        }
    });

Thanks for you answer, however I am looking for a solution that does not require checking the file size on the client side. I want my web application (server side) or IIS to throw an error and cause the upload to abort before all the data is sent. — musefan, Apr 23 '19 at 12:01
Well, the server already has access to the file size. The problem is I don't have anywhere to check this during the process. the IHttpHandler code does not get executed when the file is too big. Possibly there is another place I can hook some code into, but I don't know where that is. That would be a possible solution if it can be done? — musefan, Apr 23 '19 at 13:14

How to detect file size limits early when uploading with AJAX?

1 Answers1