This demo application shows how to draw an image watermark on each image uploaded to the server. It places a watermark to the bottom right corner of an image.

Features

The application highlights the following features:

  • Adding an image watermark to uploaded images.
  • Inserting screenshots from the clipboard to the upload list.
  • Deleting selected files to Recycle Bin.
  • Filtering files by extension.
  • Uploading additional form data.
Note

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

Note that screenshot upload is not yet supported in the Java version of Image Uploader.

Client-Side Code

Image Watermarks

Watermarks can be added only to thumbnails. However, if you need to add them to original images, do the following:

  1. Set the fit mode of one of the thumbnails to ActualSize. In this sample it is done using the UploadThumbnail1FitMode property.
  2. Prevent Image Uploader from sending source images, setting the UploadSourceFile property to false.
  3. Add watermarks to the required thumbnails. For example, for the first thumbnails use the UploadThumbnail1Watermark property.

You can read more about watermarks in the Adding Watermarks topic. For more information about using thumbnails instead of original images, see the Optimized Upload Sample.

Uploading Screenshots and Deleting Files

Image Uploader allows not only uploading files from disk, but also capturing bitmap images from clipboard. That means that the user can upload screenshots without saving them to disk and processing first. Users can simply make a screenshot pressing Shift+Print Screen or Alt+Print Screen and click the Paste Screenshot button of the control. The screenshot will be added to the upload list.

To enable screenshot upload, add the Paste Screenshot button, setting the ButtonPasteText property to the required value. To define names of screenshots in the upload list, set the PasteFileNameTemplate property.

Note

The Paste Screenshot button is available only in the three panes layout.

You can also let the user select unnecessary files in the folder pane and delete them to the Recycle Bin by clicking the Delete Selected button. To add this button to Image Uploader, set the ButtonDeleteFilesText property to some non-empty value.

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.

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 Author field).