Angular 4 ng2-file-input image size validation

Question

How to validate image size? (ex: less than 2MB) I'm using ng2-file-input for image uploading in my angular4 project.

`

public onAction(event: any) {
this.resImagesSize = event.currentFiles;
for (let i = 0; i < this.resImagesSize[i].size; i++) {
if (this.resImagesSize[i].size > 2000000) {
this.toasterService.pop('error', 'Error', 'Please upload less than 2MB image');
this.resImagesSize.splice(i, 1);
} else {
this.resImages = this.resImagesSize;
}
}
}

`

Edit: here is my toasterService code `

toasterconfig: ToasterConfig =
    new ToasterConfig({
      tapToDismiss: true,
      timeout: 5000,
      preventDuplicates: false,
      positionClass: 'toast-top-center'
    });

`

problem is when i upload more than 2 images(bigger than 2MB) it display 2 messages. How to display only one validation message ?

Can you provide the code from toasterService, my advice is to add logic to your service that only one error message is shown at a time — Jasper Seinhorst
– Jasper Seinhorst, Commented Nov 10, 2017 at 8:40
@JasperSeinhorst here is my code ` toasterconfig: ToasterConfig = new ToasterConfig({ tapToDismiss: true, timeout: 5000, preventDuplicates: false, positionClass: 'toast-top-center' });` — Damitha
– Damitha, Commented Nov 10, 2017 at 8:44
preventDuplicates: false, set this on true, and it will work as expected — Jasper Seinhorst
– Jasper Seinhorst, Commented Nov 10, 2017 at 8:52

Fateh Mohamed · Accepted Answer · 2017-11-10 09:14:03Z

1

try this, that will call the service only one time, if there is one of more invalid files:

   public onAction(event: any) {
   this.resImagesSize = event.currentFiles;
   let sizeValid = true;
   for (let i = 0; i < this.resImagesSize[i].size; i++) {
   if (this.resImagesSize[i].size > 2000000) {
      sizeValid = false;
      this.resImagesSize.splice(i, 1);
   } else {
      this.resImages = this.resImagesSize;
  }}
   if(!sizeValid ){
      this.toasterService.pop('error', 'Error', 'Please upload less than 2MB 
      image');
    }
 }

edited Nov 10, 2017 at 9:14

answered Nov 10, 2017 at 8:52

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jasper Seinhorst Over a year ago

And what if toy upload a too big file on the seconds try? The error isn't visible.

Fateh Mohamed Over a year ago

i think it works good for multiple file select, if there will be one or more invalid files the service is called but only once, can you explain more your case please

Fateh Mohamed Over a year ago

did you get an error? i forget ; after sizeValid = false it should be sizeValid = false;

Collectives™ on Stack Overflow

Angular 4 ng2-file-input image size validation

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related