This demo application shows how to use Image Uploader for traffic optimization - resized images are sent instead of the original files.

Features

The application highlights the following features:

  • Sending thumbnails instead of source files.
  • Preserving EXIF information, rotating thumbnails based on EXIF metadata.
  • File filtering by extension and image dimensions.
  • Upload of additional form data.
Note

To find information about how this demo is implemented using a specific platform, see the Samples by Platforms topic.

Client-Side Code

Resized Copies Instead of Original Images

The most obvious way to reduce the amount of traffic when uploading images to the server is to send resized copies instead of original file. In this sample, the acceptable size is defined as 1200 x 1200 pixels. To make Image Uploader send the copies, the UploadSourceFile property is set to false, and the first thumbnails are used in place of the source files. See more complete instructions on working with thumbnails in the Resizing and Rotating Images topic.

EXIF Metadata

Two properties related to EXIF are used in this demo. The first one, AllowAutoRotate, defines, whether Image Uploader should read EXIF metadata to detect camera orientation and rotate thumbnails automatically, if needed. You can read more about image rotation in the Resizing and Rotating Images topic.

The second property, UploadThumbnail1CopyExif, specifies that all EXIF metadata of the original files should be copied along with the first thumbnails. For more details on working with the EXIF information, see the Working with EXIF and IPTC Metadata topic.

File Filtering

This application also demonstrates how to allow users to upload images only of certain types. Files of other types simply will not be shown while browsing. Extensions of the allowed files are listed as a value of the FileMask property. For more information, see the Restricting Files by Extensions and Types topic.

Other criteria for filtering may be image dimensions. In this sample, the MinImageWidth and MinImageHeight properties determine the minimal size of images to upload, though any combination of maximum and minimum allowed dimensions can be used. More information about dimensions restriction can be found in the Specifying Restrictions for Image Dimensions topic.

Upload of Additional Data

To submit data collected from the additional form along with images, the value of the AdditionalFormName property is set to the name of the used form. There are other ways to upload extra data using Image Uploader, and they are described in the Uploading Additional Data with Files topic.

Server-Side Code

To complete the upload started by Image Uploader, some actions on the server side should be performed. The upload script of this application is almost equivalent to one of the Basic Demo Sample. The only difference is that now additional form data are sent along with images, and, therefore, additional POST fields are parsed (in this case, only the TotalSourceFileSize field).