Basic Demo Sample

Overview

This sample demonstrates how to:

• Display thumbnails in a two-pane layout.
• Upload the file with 120x120 thumbnail.
• Redirect to another page after a successful upload.

Client-Side Code

The client-side code of this demo contains only Image Uploader settings. Let us examine them.

Upload Settings

Main parameter, which should be provided every time Image Uploader is used, is the Action property. It specifies a URL to the page files should be uploaded to (in other words, HTTP POST request will be sent to this page). The code of this page will be discussed a bit later.

Another important (but optional) parameter is RedirectUrl. It specifies a URL where the user will be redirected when the upload completes. In our case it will be a page with a list of uploaded files.

Appearance and Behavior Settings

Although Image Uploader provides a big number of the appearance and behavior customization settings, in this demo only few of them are modified (for brevity).

The most important of them is the PaneLayout property. It specifies a layout of the control or applet, and in this way it defines the way how the user works with Image Uploader. In our case it will be two-panes layout, which is the easiest to use.

All other appearance and behavior parameters have self-descriptive names, so it makes no sense to dwell on them. However, if you need any additional information about them, check out the ImageUploader class members reference.

Thumbnail Settings

One of the most attractive features of Image Uploader is the ability to send unlimited number of thumbnails for each image. In particular, this sample sends one 120 x 120 thumbnail. Let us see how to configure Image Uploader to get this feature working.

By default, no thumbnails are uploaded. To upload a thumbnail, you should change the UploadThumbnailNFitMode (where N is a number from 1 through 3) property from None to some fit mode, e.g. Fit. A list of supported fit modes can be found in the reference for the UploadThumbnailFitMode property.

After the fit mode specified, you must provide other thumbnail settings like the thumbnail dimensions, JPEG quality, and some others.

This way, if we need to upload a single 120 x 120 thumbnail with medium JPEG quality, the following parameters should be specified:

// ...

//Configure thumbnail settings.
iu.addParam("UploadThumbnail1FitMode", "Fit");
iu.addParam("UploadThumbnail1Width", "120");
iu.addParam("UploadThumbnail1Height", "120");
iu.addParam("UploadThumbnail1JpegQuality", "60");

// ...

Server-Side Code

As Image Uploader is a pure client-side application, it can do only a half of the upload work - i.e. send files to the server. To receive files and carry out any additional operations, you should write your own code.

This sample demonstrates how to perform minimum set of actions on the server. It does three things:

1. Saves uploaded files into the Gallery folder.
2. Saves uploaded thumbnails into the Gallery/Thumbnails folder.
3. Creates an XML file that describes uploaded content (paths to the original file and thumbnail, dimensions of the original file, and user-provided description).
   Note

   In real-life application it is highly recommended to use database instead of XML files to store such kind of data.

It works in the following way:

1. All previously uploaded files are deleted. Draw attention to the fact that it is done by the server script, not by Image Uploader. If you do not want files to be deleted, just remove appropriate lines of code (see comments in code).
2. A number of files in the request is determined. To do this, check the FileCount POST field, which is always sent by Image Uploader. See the POST Field Reference for more details.
3. Check that all files are uploaded successfully. If so, iterate through all files in the request using the file count value obtained on the previous step, and:
   1. Get the source file and save it to the Gallery folder. Use the SourceFile_N POST field, where N is an index of the file in the POST request.
   2. Get the thumbnail and save it to the Gallery/Thumbnails folder. Use the Thumbnail1_N POST field, where N is an index of the file in the POST request (if you used UploadThumbnail1XXX).
   3. Write the file name, image dimensions, and user-provided descriptions to the specially created XML file. See the POST Field Reference for the information about appropriate POST fields.

Keep in mind that this code just gives some guidelines how to integrate Image Uploader with your website. It is not presumed to be used in the production environment. For brevity reasons, it intentionally omits many handy things that you may want to have, e.g. email notification, saving to specific folder, user authentication, etc. This is a matter of your application rather than of Image Uploader.