Upload File in Angular 4 using FormData works in Local but not on Azure App Service

Question

I have the following code for uploading a file , seems to work on my local(any file size), but does not work when i point it to my azure web app service with a file greater than 15MB.

This is what my request looks like:

     Accept:application/json, text/plain, */*
    Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryBBKpQY4MP4j1noAY
    Origin:http://xxxxxxxxx.azurewebsites.net
    Referer:http://xxxxxxxxxxx.azurewebsites.net/
    User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

------WebKitFormBoundaryBBKpQY4MP4j1noAY
Content-Disposition: form-data; name="selectFile"; filename="JDGUPLOAD - date error.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet


  <div class="customfile-container">
    <input type="file" id="selectFile" name="selectFile" class="custom-file-input" multiple />
  </div>

public uploadFile() {
    let files = this.elem.nativeElement.querySelector('#selectFile').files;
    if (files.length == 0) {
        this.nofileattached = true;
        this.nofileattached = true;
        //wait 3 Seconds and hide
        setTimeout(function () {
            this.nofileattached = false;
            console.log(this.nofileattached);
        }.bind(this), 5000);
    }
    else {
        this.loading = true;
        debugger;
        let formData = new FormData();
        let file = files[0];
        formData.append('selectFile', file, file.name);
        this.fileUploader.uploadCustomerFile(formData, this.customerid, this.overrideData, this.username).subscribe(res => this.importComplete(res));
    }
}

uploadCustomerFile(formData: FormData, customerid, overrideData, username) {
    let _url: string = this.config.apiUrl + '/api/FileExtract/ExtractFile?param=' + customerid + '-' + overrideData + '-' + username + '';
    return this._http.post(_url, formData).map((res: Response) => res.json());
}

Answer 1

In Azure App Service, you could increase file upload size limits by setting <requestLimits> in the web.config file:

<system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="2147483648" />
        <!--Byte in size,increase it to 2GB-->
      </requestFiltering>
    </security>
</system.webServer>

For ASP.NET, as well as adding the maxAllowedContentLength setting you also need to add:

<system.web>
    <httpRuntime maxRequestLength="2097152" />
    <!--KB in size, 4MB by default, increase it to 2GB-->
</system.web>

If you are using PHP, you'll also need to create a file called .user.ini in the /wwwroot directory and add the value of upload_max_filesize and post_max_size in it:

; Maximum allowed size for uploaded files.
upload_max_filesize = 40M

; Must be greater than or equal to upload_max_filesize
post_max_size = 40M