Meet us at PRINT 19. Chicago, IL. Oct. 3 - 5.

Configuring Files to be Uploaded in HTML5/Flash Uploader

Supported technologies: Adobe FlashHTML 5

After specifying common upload settings, it is required to set at least one ConverterConverter (ASP.NET)Converter (PHP)converter (JavaScript). Each Converter configures one converted file (original file, thumbnail created from original image file, icon associated with original file, or original file compressed into ZIP archive) which will be uploaded for each of user-selected files.

For example, you configure HTML5/Flash Uploader to send an original file and a downsized copy of image (if the original file is an image) or an icon associated with the original file. It means that if a user selects two files (a JPEG image and a PDF document) HTML5/Flash Uploader will send four files:

  • the JPEG image and the PDF file themselves
  • a resized copy of the image and a PDF icon

The following samples demonstrate this configuration.

JavaScript
var fu = $au.imageUploaderFlash({
	id: 'Uploader1',
	converters: [
	{mode: '*.*=SourceFile'},
	{mode: '*.*=Thumbnail;*.*=Icon', thumbnailFitMode: 'Fit', thumbnailWidth: '120', thumbnailHeight: '120'}
	]
});
ASP.NET
<aur:ImageUploaderFlash ID="Uploader1" runat="server">
    <Converters>
	    <aur:Converter Mode="*.*=SourceFile" />
	    <aur:Converter Mode="*.*=Thumbnail;*.*=Icon" 
			ThumbnailHeight="120" 
			ThumbnailWidth="120" 
			ThumbnailFitMode="Fit" />
	</Converters>
</aur:ImageUploaderFlash>
PHP
$uploader = new ImageUploaderFlash("Uploader1");
		
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=SourceFile");
$converters[] = $converter;
$converter = new Converter();
$converter->setMode("*.*=Thumbnail;*.*=Icon");
$converter->setThumbnailWidth(120);
$converter->setThumbnailHeight(120);
$converter->setThumbnailFitMode("fit");
$converters[] = $converter;

The way you retrieve and save converted files on the server side depends on the platform you use. Find the detailed instructions in the Saving Uploaded Files in HTML5/Flash Uploader ASP.NET, Saving Uploaded Files in HTML5/Flash Uploader PHP, and Saving Uploaded Files via HTML5/Flash Uploader in Other Platforms topics.

Consider the Converter properties in detail below.

Configuring Conversion Mode

The ModeMode (ASP.NET)Mode (PHP)mode (JavaScript) is the most prominent property of the Converter class. It specifies what will be uploaded for each file selected for upload (i.e. the original file, a downsized copy of the image, an icon, or a ZIP archive). One Converter instance can specify different types of converted files for various types of files selected for upload client-side. For example, you can configure the Converter to send downsized copies of images for JPEG images and original files for files of other types. It can be done using the aforementioned Mode property.

The Mode property accepts a format string consisting of masks=mode pairs separated by a semicolon. Each pair includes a set of file masks separated by commas and a corresponding mode. In general, this string has the following syntax:

mask11,mask12,...=mode1;mask21,mask22,...=mode2;...

Here is the list of supported modes:

  • SourceFile means that the selected file will be uploaded from a user's computer without any changes.
  • Thumbnail works as follows: if the selected file is an image, it will be resized using the parameters listed below and uploaded as a JPEG file. Otherwise, a converted file will not be sent.
  • Icon means that the system icon associated with the selected file will be uploaded. This mode is not supported by HTML5 Uploader.
  • Zip means that the selected file will be packed into a ZIP archive and then uploaded. This mode is not supported by HTML5 Uploader.
  • None means that no file will be uploaded.

When HTML5/Flash Uploader prepares the upload request, it extracts masks=mode pairs. It checks whether the name of the current file fits the file mask specified in the pair. If it fits the current pair, HTML5/Flash Uploader sends an item specified in the pair to a server. Otherwise, if no appropriate file mask is found or HTML5/Flash Uploader is unable to create a downsized copy of the image (if mode is specified as Thumbnail and the current file is not an image), HTML5/Flash Uploader checks the next pair in the same way.

Note

If there is no file mask corresponding to the original file extension or no appropriate mode, then HTML5/Flash Uploader does not send this converted file.

Uploading Thumbnails

If you specify the Mode property to send a thumbnail, you can also set the following thumbnail parameters:

See Also

Reference

Manual