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

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

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.