When an image is captured, the capturing device often writes special information about the image into the file—EXIF metadata. Those metadata may contain such information as camera parameters during capturing, date and time of the capturing, photographer's name, etc. It can even contain GPS information.

Also, there is one more metadata format named IPTC. It is widely used in journalism to keep such information about a photo as byline, subject, location, etc.

The server, where you upload images to, often uses these metadata. For example, some photo labs require EXIF metadata to provide higher results during printing, or you may also need to get exact date and time of the image creation, etc. So you may wonder how Image Uploader works with EXIF and IPTC metadata.

Image Uploader supports the following features:

Preserving EXIF When Creating Thumbnails

You can make Image Uploader send resized (as well as rotated) images instead of originals. However, you may wonder what happens with EXIF metadata when you perform imaging operations with Image Uploader. It is especially important when you process uploaded images with some specific software, e.g. for printing them at photo labs.

Fortunately, you can preserve EXIF metadata using the UploadThumbnail#CopyExif property, where # is the number of the thumbnail (UploadThumbnail1CopyExif, UploadThumbnail2CopyExif, and UploadThumbnail3CopyExif). Just set a property of the appropriate thumbnail to true. Here is a code sample for doing it.

JavaScript CopyCode imageCopy Code
<script type="text/javascript" src="iuembed.js"></script>

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

//...Any other params...

iu.addParam("UploadThumbnail1FitMode", "Fit");
iu.addParam("UploadThumbnail1Width", "1024");
iu.addParam("UploadThumbnail1Height", "1024");
iu.addParam("UploadThumbnail1JpegQuality", "70");
iu.addParam("UploadThumbnail1CopyExif", "true");

//...

iu.writeHtml();
</script>

If EXIF metadata is not essential to you, we recommend you to set these properties to false. This will make uploaded thumbnails a bit smaller.

EXIF Fields Extraction and Submitting Them to the Server

Sometimes it is more convenient to extract EXIF details at the client side and send them along with other upload fields. For example, if the only EXIF data you need is a capture date, you may send it as a separate field and discard all other EXIF information. This way instead of extracting this piece of data from the uploaded file (some special server-side component is required for this), you may just get it from the submitted request.

To extract EXIF details, use the ExtractExif property. You should set this property to a string which contains necessary EXIF field names, separated with semicolons.

JavaScript CopyCode imageCopy Code
<script type="text/javascript" src="iuembed.js"></script>

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

//...Any other params...

iu.addParam("ExtractExif", "ExifDateTime;ExifOrientation;ExifModel");

//...

iu.writeHtml();
</script>

These fields will be uploaded to the server as POST variables named in the following way: XXX_N , where XXX is the string value specified in this property (EXIF field name), and N is the number of the file in the request.

Note that 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.

You can find a more detailed description of EXIF fields in the EXIF specificationLeave site.

Automatic Image Rotation Based on EXIF Data

One more EXIF-related property, AllowAutoRotate, makes Image Uploader rotate thumbnails automatically, if needed. The decision, whether to rotate a thumbnail or not, is based on the EXIF metadata, which are extracted from the source images. Just like manual rotation, automatic rotation is applied to thubmnails only.

NoteNote

Though it may be convenient, remember that not all cameras recognize orientation properly. Also, reading EXIF data slows down the process of folder scanning, and if the folder contains a lot of images, the decrease in speed may be noticeable.

To enable automatic rotation, initialize Image Uploader as in the example below.

JavaScript CopyCode imageCopy Code
<script type="text/javascript" src="iuembed.js"></script>

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

//...Any other params...

iu.addParam("AllowAutoRotate", "true");

//...

iu.writeHtml();
</script>

IPTC Fields Extraction and Submitting Them to the Server

Image Uploader also supports extraction of the IPTC metadata. Just like EXIF fields, IPTC fields can be uploaded along with images.

To extract such data, use the ExtractIptc property. You should set this property to a string which contains required IPTC field names, separated with semicolons.

JavaScript CopyCode imageCopy Code
<script type="text/javascript" src="iuembed.js"></script>

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

//...Any other params...

iu.addParam("ExtractIptc", "IptcCredit;IptcHeadline");

//...

iu.writeHtml();
</script>

These fields will be uploaded to the server as POST variables named in the following way: XXX_N , where XXX is the string value specified in this property (IPTC field name), and N is the number of the file in the request.

You can also use preserve IPTC metadata using the UploadThumbnail#CopyIptc property, where # is the number of the thumbnail. Usage of these properties is the same as the usage of the UploadThumbnail#CopyExif properties.

Note that all date/time values have the following format: YYYYMMDD. For example, May 11, 2006 would be represented as: 20060511.

You can find a more detailed description of IPTC fields in the IPTC specificationLeave site.

See Also

Reference

UploadThumbnail1CopyExif Property
UploadThumbnail2CopyExif Property
UploadThumbnail3CopyExif Property
POST Field Reference
ExtractExif Property
AllowAutoRotate Property
ExtractIptc Property
UploadThumbnail1CopyIptc Property
UploadThumbnail2CopyIptc Property
UploadThumbnail3CopyIptc Property

Manual

Resizing and Rotating Images