This documentation is for the old version. Go to the latest Upload Suite docs

Amazon S3 Images Demo Sample

This demo application demonstrates how to upload images with its thumbnails to Amazon S3 cloud storage. Since there is one file only allowed to upload to Amazon S3 per request we use the trick which uploads source file and its thumbnails in different requests.

Features

This application highlights the following features:

  • Creating two different size thumbnails with Image Uploader.
  • Uploading original image, large (500x500) and small (120x120) thumbnails.
  • Using custom buttons and progress bar.
  • Retrieving a list of uploaded images from Amazon S3.
Note

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

Client-Side Code

Configuring AmazonS3Extender

AmazonS3Extender settings are equal to the ones specified within the Amazon S3 Demo Sample.

Uploading Original Image and Thumbnails

The idea is the following:

  1. Disable automatic removal of the successfully uploaded files (set the UncheckUploadedFiles to false).
  2. Upload each user-selected file three times. Every time use the BeforeUpload event to enable only one file (source, the first or second thumbnail) to upload in each request.
  3. Remove this file from the upload list. To do it, use the UploadFileSelected property to select this file and call the RemoveFromUploadList() method to remove it.

Appearance Customization

Amazon S3 Images Demo

In order to replace standard buttons with custom HTML links, the standard ones are hidden using the ShowButtons property. Then, appropriate Image Uploader methods are bound to the toolbar links via their onclick handlers. For more details, see the Customizing Buttons topic.

Additionally, the Progress Dialog is hidden (the SilentMode is set to true) and a custom HTML progress bar is added to the bottom of Image Uploader. This progress bar is implemented using the approach described in the Adding a Custom Progress Bar topic, however, it takes into account that Image Uploader performs three upload sessions for each user-selected file.

Server-Side Code

This demo uploads files to Amazon S3 storage directly from the client browser, so it has not its own server-side upload script.

Gallery

The gallery page looks like the same name page of the Basic Demo Sample. However, the displayed thumbnails and links to corresponded source files are retrieved from Amazon S3 storage.

See Also

Samples

Manual