Uploading Non-Image Files

General Settings

To upload non-image files you should configure the FileMask property as discussed in the Restricting Files by Extensions and Types topic.

A good idea is to set a view mode of Image Uploader panes from thubmnails to a simple or detailed list. You can do this with a help of the FolderView and UploadView properties.

This code example demonstrates how to do this:

<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.addParam("FolderView", "List");
iu.addParam("UploadView", "List");

//...

iu.writeHtml();
</script>

Uploading Mixed Content

Sometimes it may be useful to let your users upload mixed content. For example, when you develop a multimedia gallery that supports not only image files but also audio and video. Assume that you want to upload image files as resized and encoded to JPEG thumbnails and upload audio and video files as is.

To implement this functionality you should use the following script to embed Image Uploader:

1. Disable uploading of source files. To perform it you should set the UploadSourceFile property to false.
2. Specify the FileMask property to allow image, audio and video files to be displayed and uploaded.
3. Specify the Fit mode and dimensions which will be used to create thumbnails from images.
4. Configure the compression mode format string. The string should specify that images will be uploaded as resized and encoded to JPEG thumbnails but video and audio files will be uploaded as it is in their turn. Read more information about supported compression modes in the Handling Files Compression topic.

Here is how it should look like:

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...Any other params...

//Disable upload of the original files
iu.addParam("UploadSourceFile", "false");

//Specify the file mask for the files which are allowed to be displayed and uploaded
iu.addParam("FileMask", "*.bmp,*.jpg,*.png,*.gif,*.tif,*.mp3,*.avi,*.wav,*.wmv");

//Set up thumbnail upload
iu.addParam("UploadThumbnail1FitMode", "Fit");
iu.addParam("UploadThumbnail1Width", "1024");
iu.addParam("UploadThumbnail1Height", "768");
iu.addParam("UploadThumbnail1CompressionMode", "*.bmp,*.jpg,*.png,*.gif,*.tif=Jpeg;*.mp3,*.avi,*.wav,*.wmv=SourceFile");

//...

iu.writeHtml();
</script>

Then, on the server side you need to add a switch to your script that handles upload. The switch looks like the following (the sample script is written in pseudocode):

iterate through each file (i)
{
    //This value is taken from the Thumbnail1_i POST field
    file thumbnail1File
	
    //This value is taken from the UploadFile1CompressionMode_i POST field
    string compressionMode
	
    if (compressionMode == "Jpeg")
    {
        //...Process thumbnail1File as an image file...
    }
    if (compressionMode == "SourceFile")
    {
        //...Process thumbnail1File as a source file...
    }		
}

See Also

Reference

• FileMask Property
• UploadSourceFile Property

Manual

• Restricting Files by Extensions and Types
• Handling Files Compression