Let us assume the situation when you already have a web site and you just want to embed Image Uploader in it. For example, your server-side scripts parse the POST request in a strongly defined format, and of course you do not want to rewrite them to make compatible with Image Uploader. In that case you just need to configure the control to send the POST request in the necessary format.

As you know, Image Uploader sends files and additional data as POST fields. There are two kinds of these fields:

  • Standard fields contain all files and general upload information. They are generated by Image Uploader and are required to save files on the server side. Standard fields have a predefined format by default.
  • Additional fields are custom. They can be attached to the POST request using the AddField() method or the AdditionalFormName property. Additional fields can use any format you like but should not conflict with the standard field names.

See the POST Field Reference topic for more details.

If a predefined format of standard POST fields is inconvenient for you, like in the situation described at the beginning of this article, you can rename them using the RenameField() method. This method uses two string parameters OldName and NewName where OldName is a name of some standard field and NewName is its new name. Both parameters can contain the following placeholders:

  • [ItemIndex] - Current index of the uploaded file.
  • [ThumbnailIndex] - Current index of the uploaded thumbnail.

The code sample below demonstrates how to rename standard POST fields and attach the additional fields to make Image Uploader compatible with server-side scripts which parse the POST request in the following format:

  • Author - author of the uploaded images.
  • Number - number of the uploaded images.
  • FileN - original image, where N is an index of this image.
  • FileN-Description - description of the Nth uploaded image.
  • FileN-ThumbnailX - the Xth thumbnail for the Nth uploaded image.
  • FileN-ThumbnailX-Size - size of the Xth thumbnail of the Nth uploaded image.
  • FileN-ThumbnailX-Width - width of the Xth thumbnail of the Nth uploaded image.
  • FileN-ThumbnailX-Height - height of the Xth thumbnail of the Nth uploaded image.

JavaScript

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
function ImageUploader_BeforeUpload(){
var imageUploader = getImageUploader("ImageUploader");

//Add "Author" field
imageUploader.AddField("Author", author);

//Rename "FileCount" field to "Number"
imageUploader.RenameField("FileCount", "Number");
//Rename "SourceFile_N" field to "FileN"
imageUploader.RenameField("SourceFile_[ItemIndex]", "File[ItemIndex]");
//Rename "SourceFileSize_N" field to "FileN-Size"
imageUploader.RenameField("SourceFileSize_[ItemIndex]", "File[ItemIndex]-Size");
//Rename "Description_N" field to "FileN-Description"
imageUploader.RenameField("Description_[ItemIndex]", "File[ItemIndex]-Description");
//Rename "ThumbnailX_N" field to "FileN-ThumbnailX"
imageUploader.RenameField("Thumbnail[ThumbnailIndex]_[ItemIndex]", "File[ItemIndex]-Thumbnail[ThumbnailIndex]");
//Rename "ThumbnailXFileSize_N" field to "FileN-ThumbnailX-Size"
imageUploader.RenameField("Thumbnail[ThumbnailIndex]FileSize_[ItemIndex]", "File[ItemIndex]-Thumbnail[ThumbnailIndex]-Size");
//Rename "ThumbnailXWidth_N" field to "FileN-ThumbnailX-Width"
imageUploader.RenameField("Thumbnail[ThumbnailIndex]Width_[ItemIndex]", "File[ItemIndex]-Thumbnail[ThumbnailIndex]-Width");
//Rename "ThumbnailXHeight_N" field to "FileN-ThumbnailX-Height"
imageUploader.RenameField("Thumbnail[ThumbnailIndex]Height_[ItemIndex]", "File[ItemIndex]-Thumbnail[ThumbnailIndex]-Height");
}

var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...Other params and event handlers

iu.addEventListener("BeforeUpload", "ImageUploader_BeforeUpload");

//...Other params and event handlers

iu.writeHtml();
</script>