Usually it makes sense to allow uploading only the certain kinds of files. For example, if you use Image Uploader to...
- ...gather photo print orders, you would prefer to show only JPEG files and perhaps disable CMYK images.
- ...upload web graphics, you would show GIF and PNG files as well.
- ...send documents to a storage, you would disable all images and allow uploading only PDF files.
This topic describes how to manage file type restrictions in Image Uploader.
Using AllowCmykImages Property
To forbid your users to upload CMYK images set the AllowCmykImages property to false. In that case CMYK images cannot be selected for the upload. There are two ways to warn users about it:
- The appropriate thumbnails are marked as CMYK in the folder pane (if the
Thumbnails
view mode is used). The caption can be customized using the CmykImagesAreNotAllowedText property. - The error message appears whenever the user tries to select CMYK image for the upload. You can specify this message text using the MessageCmykImagesAreNotAllowedText property.
Using FileMask Property
To specify file type limitations, Image Uploader provides a FileMask property. This property specifies a file mask that designates which files should be visible in Image Uploader.
You can use wildcards:
- asterisk (*) - arbitrary substring.
- question mark (?) - single arbitrary character.
Several masks can be specified. Use semicolon to separate them.
Here are few examples of file masks:
- *.jpg - files which have the .jpg extension (most JPEG files).
- *.* - all files which have any extension.
- *.doc;*.xls - files which have either .doc or .xls extension (Microsoft Office files).
![]() |
---|
The FileMask property allows to infiltrate files only by their names. But it cannot guarantee that files, say, with the .jpg extension are JPEG files indeed. Malicious user can rename executable files to .jpg and upload them as if they were images. That's why if an application Image Uploader is integrated with has increased security requirements, it is highly recommended to verify uploaded files on the server side. Another reason for it is that a potential hacker can always emulate Image Uploader using <input type="file"> . It will enable them to bypass Image Uploader and upload dangerous files. So the file mask filter never gives a 100% guarantee that only proper files are uploaded. In other words, the FileMask property can be used only for the user convenience. It should not be interpreted as a serious protection from malicious users. |
Code Examples
Let's go through most typical scenarios which may require to configure a file mask and see the code examples.
Show All Files
JavaScript | ![]() |
---|---|
<script type="text/javascript" src="iuembed.js"></script> <script type="text/javascript"> var iu = new ImageUploaderWriter("ImageUploader", 710, 500); //...Any other params... iu.addParam("FileMask", "*.*"); //... iu.writeHtml(); </script> |
Show Images Only
JavaScript | ![]() |
---|---|
<script type="text/javascript" src="iuembed.js"></script> <script type="text/javascript"> var iu = new ImageUploaderWriter("ImageUploader", 710, 500); //...Any other params... iu.addParam("FileMask", "*.jpg;*.jpeg;*.jpe;*.bmp;*.gif"); //... iu.writeHtml(); </script> |
Show JPEG Images Only
JavaScript | ![]() |
---|---|
<script type="text/javascript" src="iuembed.js"></script> <script type="text/javascript"> var iu = new ImageUploaderWriter("ImageUploader", 710, 500); //...Any other params... iu.addParam("FileMask", "*.jpg;*.jpeg;*.jpe"); //... iu.writeHtml(); </script> |
Show ZIP Files Only
JavaScript | ![]() |
---|---|
<script type="text/javascript" src="iuembed.js"></script> <script type="text/javascript"> var iu = new ImageUploaderWriter("ImageUploader", 710, 500); //...Any other params... iu.addParam("FileMask", "*.zip"); //... iu.writeHtml(); </script> |