Simple way to restrict Image type in Pathfield xtype

 

Let’s say a small scenario where you want author should not be able to select any image type apart from .png. You can restrict the type of image author should select in pathfield xtype. Taking a close look at Pathfield xtype, you will notice we have an property name regex.

Regex ( regular expression ) can be used and a text message can be displayed in case regex doesn’t match. For text message we have property regexText. Here’s how you can achieve it:-

1. Add 2 highlighted properties in pathfield xtype widget

Restrict image in pathfield

regex: /\.(png)/ -> Shows that only URL with extension .png are allowed

regexText: Please choose an correct file -> This message will be displayed if regex is violated

2. Select an image with .png extension, you will notice it doesn’t shows any error

Select right image

3. Select an image with .jpg extension, you will notice it will be shown as error and on hover Regex text will be displayed. Author will not be able to submit dialog box in this situation.

Select Image 

Let me know if you need any help in implementation.

One thought on “Simple way to restrict Image type in Pathfield xtype

  1. Hi Praveen,

    I have created a component with xtype:pathfield and used both regex – String – /.(png)/ and regexText – String – Please select .png file only as mentioned in this article.
    I could see validation is working properly if I open the dialog editor by double click from CRXDE Lite (http://localhost:4502/apps/mywebsite/components/testimage/dialog.html). Here, testimage is the component name.

    But, I have observed different behavior while doing the authoring on page.

    Behavior observed-

    1. Validation isn’t working.
    2. Click on ‘OK’ button of the dialog editor, component itself isn’t responding.

    Have dropped a mail with an attachment. Please have a look and review.

    Please correct me if I have missed anything.

     

Leave a Reply

Your email address will not be published. Required fields are marked *