Unable to upload file with size more than 3mb using Angular js and Asp.net MVC API Controller

Question

I'm using Angular js and API Controller c# to upload files, I have a fileupload control,

cshtml

<input id="file" name="file" type="file" 
      ng-file-model="files" ng-model="file" multiple />

I'm able to upload 1MB, 2 MB files by passing filebytestring from service.js to API Controller after making changes in web.config,

web.config

<httpRuntime targetFramework="4.6.1" maxRequestLength="1048576" executionTimeout="3600"/>


<security>
    <requestFiltering>
        <requestLimits maxAllowedContentLength="1073741824" />
    </requestFiltering>
</security>

But when I try to upload file more than 3MB it is not working.

Controller.js

//Directive
app.directive('ngFileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function () {
                var values = [];
                angular.forEach(element[0].files, function (item) {
                    var reader = new FileReader();
                    reader.readAsArrayBuffer(item);
                    reader.onload = function () {
                        var arrayBuffer = reader.result
                        var bytes = new Uint8Array(arrayBuffer);
                        var fileByteString = JSON.stringify(bytes);
                        var value = {
                            // File Name 
                            name: item.name,
                            //File Size 
                            size: item.size,
                            //File URL to view 
                            url: URL.createObjectURL(item),
                            // File Input Value 
                            _file: item,
                            // File byte string
                            fileByteString: fileByteString
                        };

                        values.push(value);
                    }
                });
                scope.$apply(function () {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    };
}]);

service.js

FormService.uploadFile = function (FileModel) {

    var requestURL = "/api/FileModelAPI/UploadFile";
    var uploadFile = $http({
        url: requestURL,
        method: 'POST',
        data: FileModel,
        headers: { "accept": "application/json;odata=verbose" },

    });
    return (uploadFile.then(handleUploadFileSuccess, handleUploadFileError));
}

function handleUploadFileSuccess(response) {
    return response.data;
}

function handleUploadFileError(xhr) {
    console.log(xhr);
}

API Controller

    [HttpPost]
    public ERFileResponseModel UploadFile([FromBody] FileModel request)
    {
        ERFileResponseModel response = new ERFileResponseModel();
        try
        {
            FileManager fileMgr = new FileManager();
            response = fileMgr.AddFile(request);
        }
        catch (Exception ex)
        {
        }

        return response;

    }

Thanks in advance.

Answer 1

In my case these were the changes I needed to apply:

web.config:

 <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="4294967295" />
      </requestFiltering>
 </security>

Controller:

 [HttpPost]
 [RequestFormLimits(MultipartBodyLengthLimit = 4294967295)]
 public VmResult Create(VmPostFileAndJson multiData){
  .
  .
  .

maxAllowedContentLength: By default it is set to 30000000 around 30MB and being an uint, it should theoretically allow a max of 4,294,967,295

Answer 2

What is the error code on the client-side during the upload?
maxRequestLength property might influence limiting a large file upload.
https://learn.microsoft.com/en-us/dotnet/api/system.web.configuration.httpruntimesection.maxrequestlength?view=netframework-4.8
Try to set a large value.

<httpRuntime targetFramework="4.6.1" maxRequestLength="2147483647" />

---

    <system.webServer>
  <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="2147483647" />
    </requestFiltering>
  </security>
  </system.webServer>

Also, I suggest you change your function signature referring to the below best practice so that upload a file.
https://learn.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2
The signature of this function should not contain a parameter when fetching the data stream from the Html form.

   public Task<HttpResponseMessage> PostFormData()
{
    // Check if the request contains multipart/form-data.
    if (!Request.Content.IsMimeMultipartContent())
    {
        throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
    }

    string root = HttpContext.Current.Server.MapPath("~/App_Data");
    var provider = new MultipartFormDataStreamProvider(root);

    // Read the form data and return an async task.
    var task = Request.Content.ReadAsMultipartAsync(provider).
        ContinueWith<HttpResponseMessage>(t =>
        {
            if (t.IsFaulted || t.IsCanceled)
            {
                Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
            }

            // This illustrates how to get the file names.
            foreach (MultipartFileData file in provider.FileData)
            {
                Trace.WriteLine(file.Headers.ContentDisposition.FileName);
                Trace.WriteLine("Server file path: " + file.LocalFileName);
            }
            return Request.CreateResponse(HttpStatusCode.OK);
        });

    return task;
}

Here is an example.
https://www.c-sharpcorner.com/article/upload-large-files-in-web-api-with-a-simple-method/
Feel free to let me know if there is anything I can help with.