Configuring Files to be Uploaded in HTML5/Flash Uploader
After specifying common upload settings, it is required to set at least one Converter. 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.
var fu = $au.imageUploaderFlash({
id: 'Uploader1',
converters: [
{mode: '*.*=SourceFile'},
{mode: '*.*=Thumbnail;*.*=Icon', thumbnailFitMode: 'Fit', thumbnailWidth: '120', thumbnailHeight: '120'}
]
});
<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>$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 Mode 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.
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:
- ThumbnailHeight and ThumbnailWidth specify the height and width of the thumbnail respectively.
-
ThumbnailFitMode specifies how the thumbnail is to be resized. The following values are supported:
- Fit means that the original image should be resized to fit the rectangle specified with the ThumbnailHeight and ThumbnailWidth properties. Note that the proportions of the original image will be kept.
- ThumbnailBgColor specifies the background color of the thumbnail. This color is used when the thumbnail is created for an image with transparency.
- ThumbnailCopyExif specifies whether the thumbnail should contain EXIF metadata copied from the original file.
- ThumbnailCopyIptc specifies whether the thumbnail should contain IPTC metadata copied from the original file.
- ThumbnailJpegQuality specifies a JPEG quality value for the thumbnail. This is a number in the
[0, 100]range. If you specify0, the file size will be extremely small, and the quality will be very low (almost always unacceptable). Alternatively, if you specify100, the file size will be quite large, but JPEG artifacts will be almost invisible.