Using “ng2-file-upload” with Angular 2 and Typescript, can't upload file above, 1MB

Question

I am trying to upload a file of a size above 1Mb and is complaining about the big size. I set the size to 50 MB but this seems to not taking effect. What am i doing wrong? Please help

 @Component({
        moduleId: module.id,
        //define the element to be selected from the html structure.
        selector: 'NeedAnalysisConsult',
        //location of our template rather than writing inline templates.
        templateUrl: 'need-analysis-consultation.component.html',

    })
    export class NeedAnalysisConsultationComponent implements OnInit {
        model:any={};
        consultationDate: Date;
        organisation: string;
        devCode:String;
        maxFileSize = 50 * 1024 * 1024;


         //declare a property called fileuploader and assign it to an instance of a new fileUploader.
        //pass in the Url to be uploaded to, and pass the itemAlais, which would be the name of the //file input when sending the post request.
        public uploader:FileUploader = new FileUploader({url: URL,isHTML5: true, itemAlias: 'consultation',maxFileSize: this.maxFileSize});
        //This is the default title property created by the angular cli. Its responsible for the app works
        title = 'app works!';

        ngOnInit() {
        //override the onAfterAddingfile property of the uploader so it doesn't authenticate with //credentials.
          this.uploader.onAfterAddingFile = (file)=> { file.withCredentials = false; };
          this.uploader.onBuildItemForm=(item:any,form:any)=>{
                form.append('devCode',this.model.programmeCode);
                form.append('date',this.model.consultationDate);
                form.append('organization',this.model.organisation);

          };
        //overide the onCompleteItem property of the uploader so we are
        //able to deal with the server response.
          this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
                console.log("FileUpload:successfully uploaded:", item, status, response);
                if (status==201){

                  alert("FileUpload: successfully");

                }
                else {
                 alert("FileUpload:"+response);

              }

            };
        }

I am trying to upload a file of a size above 1Mb and is complaining about the big size. I set the size to 50 MB but this seems to not taking effect. What am i doing wrong? Please help

Do you receive error messages ? Have you check that your server allows POST/PUT for file > 1MB ? — Safiyya, Feb 20 '18 at 09:33
Changes are there could be a file size limitation from the backend. — Karthick Manoharan, Feb 20 '18 at 10:06

score 0 · Answer 1 · answered Feb 20 '18 at 10:48

I have tested your method, and it's uploading fine on my server. Check if your server is configured to accept files greater than 1 MB. To be able to confirm that the error response from the server you can implement the following call-backs, like you have done on onCompleteItem.

 onSuccessItem(item: FileItem, response: string, status: number, headers:ParsedResponseHeaders): any {
            //this gets triggered only once when first file is uploaded       
     }
    onErrorItem(item: FileItem, response: string, status: number, headers: 
           ParsedResponseHeaders): any {
                let error = JSON.parse(response); //error - server response            
            }

You can then subscribe to them as shown below:

this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers);
this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers);

This way, you'll be able to check if the error is from the server.

score 0 · Answer 2 · answered Nov 18 '20 at 18:56

Only two things could cause this:

Client side if ng2-file-upload maxFileSize parameter is less than 1MB

Server side If you are using PHP on the serverside adjust the following parameters in php.ini

post_max_size = 50M # implies that a single post request should not exceed 50MB at any given time no matter the number of files uploaded.
upload_max_filesize = 50M # Implies that no individual file should exceed 50MB per request
max_file_uploads = 10 # implies that only 10 files can be uploaded in a single request

Using “ng2-file-upload” with Angular 2 and Typescript, can't upload file above, 1MB

2 Answers2