Working with EXIF and IPTC Metadata in HTML5/Flash Uploader

Supported technologies: Adobe Flash

Metadata are the additional data that image contains. Such information can be used, for example:

  • to provide higher results during printing
  • to get exact date and time of the image creation
  • to categorize images
  • to implement advanced image search

HTML5/Flash Uploader works with two metadata formats: EXIF and IPTC.

When an image is captured, the capturing device writes EXIF (Exchangeable Image File Format) information about the image into the captured file. EXIF fields may contain such information as camera parameters during capturing, date and time of the capturing, photographer's name, and etc. It can even contain GPS information. For more information about EXIF, please, see the EXIF Specification article.

IPTC (International Press Telecommunications Council) Information Interchange Model is widely used in journalism to keep such information as byline, subject, location, and etc. For more information about the IPTC format, please, see the IPTC Specification article.

HTML5/Flash Uploader supports the following metadata-related features:

Preserving EXIF and IPTC Metadata While Creating Thumbnails

You can make HTML5/Flash Uploader send transformed (resized, rotated, and etc.) images. However, you may wonder what happens with EXIF and IPTC metadata when you perform imaging operations with Flash 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 and IPTC metadata using the ThumbnailCopyExifThumbnailCopyExif (ASP.NET)ThumbnailCopyExif (PHP)thumbnailCopyExif (JavaScript) and ThumbnailCopyIptcThumbnailCopyIptc (ASP.NET)ThumbnailCopyIptc (PHP)thumbnailCopyIptc (JavaScript) properties of the ConverterConverter (ASP.NET)Converter (PHP)converter (JavaScript) class. Just set the property to true and metadata of chosen type will be embedded in the corresponding thumbnail.

Default value of the discussing property is false, this allows making uploaded thumbnails a bit smaller.

The following example configures the converter to create thumbnails with both types of metadata (EXIF and IPTC) preserved.

ASP.NET
<aur:ImageUploaderFlash ID="Uploader1" runat="server">
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" 
            ThumbnailCopyExif="true" 
            ThumbnailCopyIptc="true"/>
    </Converters>
</aur:ImageUploaderFlash>
PHP
$uploader = new ImageUploaderFlash("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailCopyExif(true);
$converter->setThumbnailCopyIptc(true);
$converters[] = $converter;
$uploader->getUploadSettings()->setActionUrl("upload.php");
$uploader->render();
JavaScript
var fu = $au.imageUploaderFlash({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailCopyExif: true,
        thumbnailCopyIptc: true}]
});

Accessing EXIF and IPTC in runtime

If you need to get EXIF or IPTC fields after the user selects this files, you can use file.exif(Function) and file.iptc(Function) JavaScript methods. Both of them are asynchronous - you pass a callback function which is called after data is read. This function receives metadata object as a first argument.

For example, this code takes EXIF and IPTC data from the first item of the upload list and displays it in the Developer Console:

JavaScript
$au.imageUploaderFlash('Uploader1').files().get(0).exif(function(a){console.log(a)});

$au.imageUploaderFlash('Uploader1').files().get(0).iptc(function(a){console.log(a)});   
    

See Also

Reference

Manual

Other Resources