Validation message for the image dimensions selected in ejs uploader

[Lahari Navudu]

In ejs-uploader after selecting the image need to show the validation message if the image dimensions exceeds the specified dimensions and upload button should be disabled.

In the above screenshot validation for image size is taking place , In the same scenario for the image dimensions as well we need to restrict it by showing a validation message and restricting to upload.

can you please show the to achieve it.

[Berly Christopher]

Hi Lahari, 

  

Greetings from Syncfusion support. 

  

There is no built-in property for calculating the image dimension and restrict the upload functionality in the Uploader component. We have prepared the custom sample by calculating the selected image dimension and modified the status text in the file selected event. You can make use of it based on the application needs. 

  

Sample Link: https://stackblitz.com/edit/angular-4ilfji-ovgf8u?file=app.component.ts  

  

public onSelect(args) { 

    var reader = new FileReader(); 

    reader.readAsDataURL(args.filesData[0].rawFile); 

    reader.onload = function(e) { 

      var image = new Image(); 

      image.src = e.target.result; 

      image.onload = () => { 

        var height = this.height; 

        var width = this.width; 

        console.log(this); 

        if ( 

          (height >= 1024 || height <= 1100) && 

          (width >= 750 || width <= 800) 

        ) { 

          alert('Height and Width must not exceed 1100*800.'); 

          var upload = document.getElementById('defaultfileupload'); 

          upload.ej2_instances[0].l10n.currentLocale.uploadSuccessMessage = 

            'File size exceed'; 

          return false; 

        } 

        alert('Uploaded image has valid Height and Width.'); 

        return true; 

      }; 

    }; 

  } 

 

 

  

Regards, 

Berly B.C 

[Lahari Navudu]

Hi Berly,

Thank you for responding I have tried this sample but I was getting the below error,

can you please show a solution for this issue.

[Prince Oliver]

Hi Lahari, 

The mentioned issue are typing issue, this can be resolved as follows 

1. error TS2531: Object is possibly 'null'
   
   

upload!.ej2_instances[0].l10n.currentLocale.uploadSuccessMessage ='File size exceed'; 

reference link: https://stackoverflow.com/questions/40349987/how-to-suppress-error-ts2533-object-is-possibly-null-or-undefined

 

2.  error TS2339: property ej2_instances does not exist on type HTMLEelement
   
   Since ‘ej2_instances’ is a private property and cannot be accessed via explicit type declaration. We suggest you use it as any type.

 

(upload as any).ej2_instances[0].l10n.currentLocale.uploadSuccessMessage ='File size exceed'; 

reference link: https://stackoverflow.com/questions/38324949/error-ts2339-property-x-does-not-exist-on-type-y 

Sample: https://stackblitz.com/edit/angular-4ilfji-5h5xev?file=app.component.ts 

Please let us know if you need any further assistance. 

Regards, 

Prince 

[Lahari Navudu]

Hi Prince,

Thank you for responding, I have tried the code snippet, it is working like this

The message is displaying after clicking on upload.

I need the message before uploading the image and it should be in red color as a failure scenario and upload needs to be restricted. Can you please find a solution for this.

Thanks,

Lahari Navudu

[Berly Christopher]

Hi Mario, 

  

We are glad to know that the issue is resolved at your end. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C 

[Lahari Navudu]

Hi Berly,

The message is displaying after clicking on upload.

I need the message before uploading the image and it should be in red color as a failure scenario and upload needs to be restricted. Can you please find a solution for this.

Thank you

Lahari Navudu

[Berly Christopher]

Hi Lahari, 

  

We have modified the sample based on the requested requirement by affecting the DOM element of Uploader component and attached it below. Based on the below code snippet, you can change the status text and upload actions. 

  

public onSelect(args) { 

  var reader = new FileReader(); 

  reader.readAsDataURL(args.filesData[0].rawFile); 

  reader.onload = function(e) { 

    var image = new Image(); 

    (image as any).src = e.target.result; 

    image.onload = function() { 

      var height = this.height; 

      var width = this.width; 

      console.log(this); 

      if ( 

        (height >= 1024 || height <= 1100) && 

        (width >= 750 || width <= 800) 

      ) { 

        alert('Height and Width must not exceed 1100*800.'); 

        var upload = document.getElementById('defaultfileupload'); 

        document.querySelector('.e-file-status').innerHTML = 

          'File size exceed'; 

        document.querySelector('.e-file-status').style.color = 'red'; 

        document 

          .querySelector('.e-file-upload-btn') 

          .classList.add('e-disabled'); 

        return false; 

      } 

      alert('Uploaded image has valid Height and Width.'); 

      document.querySelector('.e-file-status').style.color = 'green'; 

      document 

        .querySelector('.e-file-upload-btn') 

        .classList.remove('e-disabled'); 

      return true; 

    }; 

  }; 

} 

 

  

Modified sample Link: https://stackblitz.com/edit/angular-4ilfji-dtbbbm?file=app.component.html  

  

Regards, 

Berly B.C 

[Lahari Navudu]

Hi Berly,

Thank you for responding, but I was getting the below error after trying this code snippet.

Can you please show me a solution for this one.

Thank you,

Lahari Navudu

[Vinitha Jeyakumar]

Hi Lahari, 

 

 

We have validated your queries, 

 

 

The issues which you have faced are typing issues and it can be resolved in following ways, 

 

Query 1. “error TS2531: Object is possibly 'null' 

 

It can be resolved by adding ‘!’ symbol as below, 

 

document.querySelector('.e-file-status')!.innerHTML ='File size exceed'; 

 

Reference link: https://stackoverflow.com/questions/55588968/type-error-object-is-possibly-null-ts2531-for-window-document 

 

Query 2. “TS2339: Property 'style' does not exist on type 'Element'” 

 

It can be resolved by adding <HTMLElement> as below, 

 

document.querySelector<HTMLElement>('.e-file-status').style.color ='red'; 

 

Reference link: https://stackoverflow.com/questions/58773652/ts2339-property-style-does-not-exist-on-type-element 

 

Sample: https://stackblitz.com/edit/angular-4ilfji-r2tosy?file=app.component.ts 

 

Please check the above sample and let us know if it resolves your issue. 

 

Regards, 

Vinitha.