This documentation is for the old version. Go to the latest Upload Suite docs

Uploading Additional Data with Files

Pretty often you need to upload not only images, but also some specific information like a category caption or an author name of the images being sent. There are several ways to send such data with Image Uploader.

Additional HTML Form

The first way is to add to the page an additional HTML form and attach it to Image Uploader using the AdditionalFormName property. Here is a short example.

Specify the form

HTML
<form id="Form1" name="Form1">
	Author: <input id="Author" name="Author" type="text" value="Alex" size="50" />
</form>

Attach it to Image Uploader by the form name

JavaScript
<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...

iu.addParam("AdditionalFormName", "Form1");

//...

iu.writeHtml();
</script>

Now, when the users click the Send button to upload their images, the form data will also be submitted. The server-side processing script will get the fields of this form (in our example, the Author field of the Form1 form) along with the standard Image Uploader fields like FileCount, SourceFile_1, Thumbnail1_1, etc.

Note

The name (not the ID) of the INPUT field will be used to identify this field when the script analyzes posted data on the server side. That is why you should avoid specifying a field name that may conflict with the standard field names of Image Uploader. Using such names will cause a collision, and either a script error will occur or the field will be ignored (depending on your server platform). See the POST Field Reference for a complete list of such fields.

The AddField Method

Another way of sending additional data is to use a method named AddField(), which enables you to append extra fields to the POST request submitted to the server.

JavaScript
<script type="text/javascript" src="iuembed.js">  </script>                       
<script type="text/javascript">
function beforeUploadHandler() {
	getImageUploader("ImageUploader").AddField("Author", "Author Name");
}

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

// ...Other params...

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

// ...Other params...

iu.writeHtml();

</script>

The first argument of this method is a key, and the second one is a value. This method is an analogue to the INPUT element - the key corresponds to the name attribute of this element, and the value corresponds to the value attribute. Use the key to get the value of this field on the server.

Remember, that when you call the writeHtml method of the ImageUploaderWriter object, the Image Uploader object itself does not necessarily exists. That is why it is recommended to call the AddField() method in the fullPageLoad event handler or, which is more suitable, in the BeforeUpload event handler.

To remove the added fields simply call the RemoveField() method. When the upload is finished (either successfully or not), the additional data will be discarded automatically.

GET Requests

The last way to provide some extra information to your processing script is to use GET requests. To do that simply add necessary arguments to the URL specified with the Action property and parse the request on the server.

JavaScript
<script type="text/javascript" src="iuembed.js">  </script>                       
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 600, 500);

// ...Other params...

iu.addParam("Action", "upload.aspx?argument1=value1&argument2=value2");

// ...Other params...


iu.writeHtml();

</script>

See Also

Reference

Samples

Manual