--- title: "Uploading Additional Data in HTML5/Flash Uploader ASP.NET" canonical: https://www.aurigma.com/docs/us8/uploading-additional-data-in-aspnet-iuf.htm product: "Upload Suite 8" --- # Uploading Additional Data in HTML5/Flash Uploader ASP.NET Supported technologies: ![Adobe Flash](https://www.aurigma.com/docs/us8/icons/flash.png)![HTML 5](https://www.aurigma.com/docs/us8/icons/html5.png) Quite often it is necessary to send additional information along with files. HTML5/Flash Uploader solves this task and supports uploading the following kinds of additional information: - common information about upload defined by the Web site logic, such as an author name, keywords, or a category caption - a simple text description - image rotation angle - more image-specific information, like copyright notes and camera parameters during capturing, contained in EXIF and IPTC fields This topic has two paragraphs, namely, uploading common data and uploading image-specific data. Each of them describes approaches on how to send and receive relevant data, possibilities provided by these approaches, and code samples. **Note** If you are unfamiliar with the [Saving Uploaded Files in HTML5/Flash Uploader ASP.NET](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-aspnet-iuf.htm.md) topic, please, read it first. ## Uploading Common Data This section describes several approaches to uploading additional data. They are quite different but have two features in common, namely, independence of file types and upload of common data. - To get user-provided information about a whole upload you may use an HTML form, as described in the using additional HTML form section. This approach is simple to use and understand, it is also quite flexible. Pay attention to the fact that in this case you cannot upload different data for different files, only one set of data for a whole upload. - To add hidden data to a whole upload you can use custom fields. As opposed to the previous method, this one allows you to add data programmatically. For more information about this approach, see the using additional field section. - To upload user-defined file descriptions you do not need to configure HTML5/Flash Uploader beforehand, so it is the simplest way to get additional information with each uploaded file. Receiving of descriptions is examined in the using descriptions section. ### Using Additional HTML Form Using HTML forms is the most straight-forward way to upload data in web applications, thus, HTML5/Flash Uploader supports it. All you need is just to add the desired form to the same page where the [ImageUploaderFlash](https://www.aurigma.com/docs/us8/FH_T_Aurigma_ImageUploaderFlash_ImageUploaderFlash.htm.md) control is hosted and set the [Metadata.AdditionalFormName](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Metadata_AdditionalFormName.htm.md) property to the name of created form. Then, when a user clicks **Upload**, the form data will be submitted along with user-selected files. On the server side, the fields of this form are accessible through the [Package.PackageFields](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Package_PackageFields.htm.md) collection by their names. An additional form can contain HTML input elements of different types, for example, you may use: - `text` for author's name - `checkbox` to determine whether to send a notification about the upload completion - `select` to choose keywords related to the upload **Note** The following input types are not allowed: `file`, `image`, `button`, and `reset`. Their values will not be sent at all. #### Sending Data The following configuration makes HTML5/Flash Uploader sending data from the `addForm` form along with uploaded files. ```aspx-cs
``` #### Receiving Sent Data Fields of the additional form are sent in each package, though in the following example we use the first package, which number is `0`, because there is always at least one package in the upload session. ```csharp protected void AllFilesUploaded(object sender, Aurigma.ImageUploaderFlash.AllFilesUploadedEventArgs e) { string keywords = e.Packages[0].PackageFields["keywords"]; string addressee = e.Packages[0].PackageFields["addressee"]; } ``` ### Using Additional Field Additional fields can be attached to the POST request using the [metadata.addCustomField(String, String, Boolean)](https://www.aurigma.com/docs/us8/FH_M_J_$au_metadata_addCustomField_3_c43e5881.htm.md) method. It accepts the following parameters: 1. name of the additional field 2. value of the additional field 3. optional parameter telling how to deal with previous value of this field, which is overwritten by default You may add custom fields to the upload request only at runtime using the [HTML5/Flash Uploader JavaScript API](https://www.aurigma.com/docs/us8/using-image-uploader-flash-at-runtime.htm.md). Custom fields can use any format you like but should not conflict with the standard field names. See the [POST Field Reference](https://www.aurigma.com/docs/us8/post-field-reference-iuf.htm.md) topic for a full list of standard HTML5/Flash Uploader fields. On the server side, additional fields are accessible through the **Package.PackageFields** collection by their names. The following example sends and receives an additional field named `authorField`. Here the **metadata.addCustomField(String, String, Boolean)** method is called in the [BeforeUpload](https://www.aurigma.com/docs/us8/FH_E_ImageUploaderFlash_BeforeUpload.htm.md) event handler, which fires when the upload is about to be started. For more information about events, please, see the [using events](https://www.aurigma.com/docs/us8/using-image-uploader-flash-at-runtime.htm.md) section. #### Sending Data ```aspx-cs
``` #### Receiving Sent Data Additional fields are sent in each package, though in the following example we use the first package, which number is `0`, because there is always at least one package in the upload session. ```csharp protected void AllFilesUploaded(object sender, Aurigma.ImageUploaderFlash.AllFilesUploadedEventArgs e) { string author = e.Packages[0].PackageFields["authorField"]; } ``` ### Receiving Descriptions Each file uploaded via HTML5/Flash Uploader may have a description. There is no need to turn this possibility on, because it is enabled by default. So, let us examine how to get descriptions of uploaded files on a server using the FileUploaded [Uploader.FileUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_BaseUploadControl_FileUploaded.htm.md) [UploadRequest.FileUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_UploadRequest_FileUploaded.htm.md) [UploadHandler.FileUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_UploadHandler_FileUploaded.htm.md) event handler: ```csharp protected void FileUploaded(object sender, Aurigma.ImageUploaderFlash.FileUploadedEventArgs e) { string description = e.UploadedFile.Description; } ``` ## Uploading Image-specific Data HTML5/Flash Uploader has some imaging capabilities; let us describe two of these features, which allow uploading additional data: 1. Rotating of images is enabled in HTML5/Flash Uploader by default. So, it is a good idea to get rotation angle on a server. To get more information on how to do this, see the receiving rotation angle section. 2. [Working with EXIF and IPTC Metadata in HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/working-with-exif-and-iptc-metadata-iuf.htm.md) provides, among other possibilities, an opportunity to extract and upload EXIF and IPTC fields for each user-selected image. EXIF metadata is a special information about the image, written into the file by the capturing device when an image was captured. These metadata may provide camera parameters during capturing, date and time of the capturing, photographer's name, and etc. IPTC is another metadata format, which is widely used in journalism to keep information about a photo, like byline, subject, location, and etc. See the handling EXIF and IPTC metadata section for detailed description on how to send and receive such metadata. ### Receiving Rotation Angle A rotation angle can be got through the [Angle](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_UploadedFile_Angle.htm.md) property of the [UploadedFile](https://www.aurigma.com/docs/us8/FH_T_Aurigma_ImageUploaderFlash_UploadedFile.htm.md) class. HTML5/Flash Uploader measures rotation angle in degrees clockwise. As soon as rotation of images is allowed by default, there is no need to configure HTML5/Flash Uploader to send it, so the following example shows only how to receive such data on a server. ```csharp protected void FileUploaded(object sender, Aurigma.ImageUploaderFlash.FileUploadedEventArgs e) { int angle = e.UploadedFile.Angle; } ``` ### Handling EXIF and IPTC Metadata To upload EXIF or IPTC values, you should specify the desired fields using the [Metadata.Exif](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Metadata_Exif.htm.md) and [Metadata.Iptc](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Metadata_Iptc.htm.md) properties. Both these properties represent semicolon separated lists of field names which should be extracted and uploaded along with images. [Metadata.ValueSeparator](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Metadata_ValueSeparator.htm.md) sets a string separator for fields which can contain multiple string values, like **IptcKeyword**. #### Sending Data The following example sends two EXIF and two IPTC fields for each user-selected image: ```aspx-cs ``` #### Receiving Sent Data The following example gets the EXIF and IPTC fields sent accordingly to the previous configuration and writes these values to the `Descriptions.xml` file. Here uploaded fields are contained in the **Package.PackageFields** collection and can be retrieved by keys named in the following way: `FieldName_xx`, where `FieldName` is a name of an EXIF or IPTC field and `xx` is the index of an uploaded file in this package. ```csharp protected void FileUploaded(object sender, Aurigma.ImageUploaderFlash.FileUploadedEventArgs e) { string galleryPath = Server.MapPath("Gallery"); System.Xml.XmlDocument descriptions = new System.Xml.XmlDocument(); if (System.IO.File.Exists(galleryPath + "Descriptions.xml")) descriptions.Load(galleryPath + "Descriptions.xml"); else descriptions.AppendChild(descriptions.CreateElement("files")); System.Xml.XmlElement file = descriptions.CreateElement("file"); file.SetAttribute("name", e.UploadedFile.SourceName); file.SetAttribute("CopyrightNotice", e.UploadedFile.Package.PackageFields["IptcCopyrightNotice_" + e.UploadedFile.Index]); file.SetAttribute("IptcKeyword", e.UploadedFile.Package.PackageFields["IptcKeyword_" + e.UploadedFile.Index]); file.SetAttribute("ExifColorSpace", e.UploadedFile.Package.PackageFields["ExifColorSpace_" + e.UploadedFile.Index]); file.SetAttribute("ExifDateTime", e.UploadedFile.Package.PackageFields["ExifDateTime_" + e.UploadedFile.Index]); descriptions.DocumentElement.AppendChild(file); descriptions.Save(galleryPath + "Descriptions.xml"); } ``` **Note** All date/time values have the following format: `YYYY:MM:DD hh:mm:ss`. For example, May 11, 2006, 2:40PM would be represented as: `2006:05:11 14:40:00`. ## See Also ### Reference - [Metadata Class](https://www.aurigma.com/docs/us8/FH_T_Aurigma_ImageUploaderFlash_Metadata.htm.md) - [Package Class](https://www.aurigma.com/docs/us8/FH_T_Aurigma_ImageUploaderFlash_Package.htm.md) - [addCustomField(String, String, Boolean) Method](https://www.aurigma.com/docs/us8/FH_M_J_$au_metadata_addCustomField_3_c43e5881.htm.md) - [UploadedFile Class](https://www.aurigma.com/docs/us8/FH_T_Aurigma_ImageUploaderFlash_UploadedFile.htm.md) - FileUploaded [Uploader.FileUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_BaseUploadControl_FileUploaded.htm.md) [UploadRequest.FileUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_UploadRequest_FileUploaded.htm.md) [UploadHandler.FileUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_UploadHandler_FileUploaded.htm.md) - AllFilesUploaded [Uploader.AllFilesUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_BaseUploadControl_AllFilesUploaded.htm.md) [UploadRequest.AllFilesUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_UploadRequest_AllFilesUploaded.htm.md) [UploadHandler.AllFilesUploaded](https://www.aurigma.com/docs/us8/FH_E_Aurigma_ImageUploaderFlash_UploadHandler_AllFilesUploaded.htm.md) - [BeforeUpload Event](https://www.aurigma.com/docs/us8/FH_E_ImageUploaderFlash_BeforeUpload.htm.md) - [ActionUrl Property](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_UploadSettings_ActionUrl.htm.md) ### Manual - [Saving Uploaded Files in HTML5/Flash Uploader ASP.NET](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-aspnet-iuf.htm.md) - [Working with EXIF and IPTC Metadata in HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/working-with-exif-and-iptc-metadata-iuf.htm.md)