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.
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:
- Disable automatic removal of the successfully uploaded files
(set the UncheckUploadedFiles to
false). - 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.
- 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
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.