Base solution for your next web application
Open Closed

ng2-file-upload hangs on pending then fails with cors error ( Large Files) #9176


User avatar
0
mmorales created

I'm trying to upload a 25GB file using the ng2-file-upload but I'm getting the following error on large files : Access to XMLHttpRequest at 'https://localhost:44301/FileManager/UploadFile' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Smaller files work okay.

upload(): void {
    var parentId = document.getElementById('folderId').innerHTML;
    this._uploaderOptions.autoUpload = false;
    this._uploaderOptions.authToken = 'Bearer ' + this._tokenService.getToken();
    this._uploaderOptions.removeAfterUpload = true;
    this.uploader.onAfterAddingFile = (file) => {
        file.withCredentials = false;
    };
    this.uploader.onBuildItemForm = (fileItem: FileItem, form: any) => {
        form.append('FileType', fileItem.file.type);
        form.append('FileName', fileItem.file.name);
        form.append('FileToken', this.guid());
        form.append('FolderId', parentId);
    };

    this.uploader.onSuccessItem = (item, response, status) => {
        const resp = <IAjaxResponse>JSON.parse(response);
        console.log(resp);
        if (resp.success) {
            this.InsertDocInformation(resp.result.fileToken, resp.result.fileName, parentId);
        } else {
            this.message.error(resp.error.message);
        }
    };
    this.uploader.setOptions(this._uploaderOptions);

    this.uploader.uploadAll();

}

4 Answer(s)
  • User Avatar
    1
    ismcagdas created
    Support Team

    Hi @mmorales,

    That's probably related to server side. Could you check server side log files to see the exact error message ?

    You can configure this size in your Program.cs like below;

    .UseKestrel(options =>
        {
            options.Limits.MaxRequestBodySize = 52428800; //50MB
        });
    

    But, if you are hosting your app on IIS, it also has a limit for request body size. You can search it on the web to learn how to increase it.

  • User Avatar
    0
    mmorales created

    Yes, that worked. I noticed one thing. When I upload a large file it takes a long time before the request is sent to the backend(asp.netcore). what could this be?

    Another questions, is it being sent in chunks?

  • User Avatar
    1
    ismcagdas created
    Support Team

    Hi,

    Yes, that worked. I noticed one thing. When I upload a large file it takes a long time before the request is sent to the backend(asp.netcore). what could this be?

    Might be related to angular upload component. You can check its GitHub repo. I couldn't find a similar issue when I checked.

    Another questions, is it being sent in chunks?

    I don't know actually.

    If this component causes problem, you can take a look at https://primefaces.org/primeng/showcase/#/fileupload

  • User Avatar
    0
    mmorales created

    Thank you.