Basic demo application is intended to demonstrate minimum steps to start using Image Uploader.
This sample demonstrates how to:
The client-side code of this demo contains only Image Uploader settings. Let us examine them.
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.
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.
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
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
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"); // ...
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:
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:
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.