Usually it makes sense to allow uploading only 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 the 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 and DeniedFileMask Properties

To specify file type limitations, Image Uploader provides the FileMask and DeniedFileMask properties. The first one specifies a file mask that designates which files should be visible in Image Uploader. The second property specifies a file mask for the files that are denied to be displayed.

Both properties support the following wildcards:

  • asterisk (*) - arbitrary substring.
  • question mark (?) - single arbitrary character.

Several masks can be specified. Use a semicolon to separate them.

Here are few examples of file masks:

  • *.jpg - files which have the .jpg extension (most JPEG files).
  • *.* - all the files which have any extension.
  • *.doc;*.xls - files which have either .doc or .xls extension (Microsoft Office files).
Important

The FileMask and DeniedFileMask properties allow infiltrating 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 is 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 and DeniedFileMask properties can be used only for the user convenience. It should not be interpreted as a serious protection from malicious users.

Code Examples

Let us go through the 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>

Deny Executable 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("DeniedFileMask", "*.exe");

//...

iu.writeHtml();
</script>