CODEWITHSUNDEEP
typescriptangular2-templateng2-file-upload
Ndinelago
Ndinelago

Reputation: 1

ng2-file-upload: file maxFileSize limited to size < 1MB in Angular 2 using typescript

Here is my code. I am not able to upload any file with a size morethan 1 mb but i have set my maxFileSize to 50mb, please help, what am i doing wrong?

@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);

          }

        };
    }
    //declare a constroctur, so we can pass in some properties to the class, which can be    //accessed using the this variable
    constructor(private http: Http, private el: ElementRef,private router:Router,private _location: Location) {

    }
    @ViewChild('selectedFile') selectedFile: any;
    clear(){
      this.model.programmeCode="";
      this.model.organisation="";
      this.model.consultationDate=null;
      this.selectedFile.nativeElement.value = '';
       (<HTMLInputElement>document.getElementById("file-name")).value = "";
    }
     updateFile(){
       (<HTMLInputElement>document.getElementById("file-name")).value = "";
       for(var i = 0;i<this.uploader.queue.length;i++){
        if(i != 0)
          (<HTMLInputElement>document.getElementById("file-name")).value += " ; "+this.uploader.queue[i].file.name;
         else
          (<HTMLInputElement>document.getElementById("file-name")).value = this.uploader.queue[i].file.name;
        console.log(this.uploader.queue[i].file.name);
      }
     }

     close() {
        console.log("closing the window...");
        this.router.navigate(['/home']);
    }
    removefile(){
        (<HTMLInputElement>document.getElementById("file-name")).value = "";
    }
      backClicked() {
        this._location.back();
    }

}

Here is my code. I am not able to upload any file with a size morethan 1 mb but i have set my maxFileSize to 50mb, please help, what am i doing wrong?

Upvotes: 0

Views: 10525

Answers (2)

Alferd Nobel
Alferd Nobel

Reputation: 3979

try this in your .component.ts : 

ngOnInit() {
let maxFileSize = 5 * 1024 * 1024; // modify this to your desired max file size
this.uploader = new FileUploader({ 
  url:this.url, removeAfterUpload: false, 
  autoUpload: false ,
  method:'post',
  maxFileSize:maxFileSize
});

  this.uploader.onWhenAddingFileFailed = (item, filter) => {
    let message = '';
    switch (filter.name) {
      case 'fileSize':
        message = 'Warning ! \nThe uploaded file \"' + item.name + '\" is ' + this.formatBytes(item.size) + ', this exceeds the maximum allowed size of ' + this.formatBytes(maxFileSize);
        break;
      default:
        message = 'Error trying to upload file '+item.name;
        break;
    }

    alert(message);
  };
}

formatBytes(bytes, decimals?) {
  if (bytes == 0) return '0 Bytes';
  const k = 1024,
    dm = decimals || 2,
    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

Upvotes: 7

kumar gulshan
kumar gulshan

Reputation: 21

The normal tomcat server application doesn't allow the files more than 1 MB to get uploaded due to which it is throwing error.

If you see the api console(java/.net) you will be able to see the errors in that.

You can set the max size for the api first. Use this link for more references

If you are getting the error of multipart, use this link for more information.

Upvotes: 2

Related Questions