1. Image Uploader 7.0.37
  2. Reference
  3. Image Uploader JavaScript Reference
  4. $au Namespace
  5. uploadPane Class
  6. uploadPane Properties
This documentation is for the old version. Go to the latest Upload Suite docs

uploadPane.tileTemplate Property

Supported browsers: Internet ExplorerFirefoxGoogle ChromeSafari

Gets or sets an HTML-like template of the data displayed inside a tile.

Syntax

JavaScript Initialize 
$au.uploader({
    uploadPane: {
        //...other params...
        tileTemplate: "<p>[FileName]</p><p style="color: #555555">[FileType] [FileSize]</p>",
        //...other params...
    }
})

Property Value

Type: String

HTML-like template of the data, which is displayed inside the tile in the upload pane.

Default value is "<p>[FileName]</p><p style="color: #555555">[FileType] [FileSize]</p>".

Remarks

A tile template is a string, which can include simple text, HTML tags, and predefined variables. Within a template you can use the following:

  • tags: <p> and <span>
  • attributes: style, rows (for <p> tag only), width (for <span> tag only; in percents or in pixels), and align (for <span> tag only; can be left, right, and center)
  • styles: color, font-size (percent value, pixels like 12px, or points like 10pt), font-style (italic or normal), and font-weight (bold or normal)

The following predefined variables are available in templates:

Variable nameReturned value
FileNamefile name
FileSizefile size
FileTypefile type
DateModifiedfile last modification date
Dimensionsimage size in pixels; an empty string for non-image files
Descriptionuser-given description of the file
Tagtag of the file; the tag can be specified via the tag property

To utilize a predefined variable in a template, you should put variable's name in square brackets.

Note

White spaces are not allowed between the '<' and the tag name, between '</' and the tag name, or inside '/>'.

The sample below demonstrates how to use tags, style, and predefined variables described previously; you can see the resulting tiles in the following figure:

Customized Tiles View
JavaScript
var u = $au.uploader({
    id: 'Uploader1',
    folderPane: {viewMode: 'Tiles', tileHeight: '100', tileWidth: '250', tilePreviewSize: '100',
        tileTemplate: '<p>[fileName]</p><p style="font-size: 85%; color: #555555" >Size: ' +
        '<span style="font-weight: bold; color: #000000">[FileSize]</span></p>' + 
        '<p style="font-size: 85%; color: #555555" >Resolution: ' +
        '<span style="font-weight: bold; color: #000000">[Dimensions]</span></p>' +
        '<p rows="3" style="font-size: 85%; color: #555555">Description: ' + 
        '<span style="font-weight: bold; color: #000000">[Description]</span></p>'
    }
});
u.writeHtml();

See Also

Reference

Manual