---
title: "uploadPane.tileTemplate Property  ActiveX/Java Uploader JavaScript"
canonical: https://www.aurigma.com/docs/us8/JA_P_J_$au_uploadPane_tileTemplate.htm
product: "Upload Suite 8"
---

# uploadPane.tileTemplate Property ActiveX/Java Uploader JavaScript

Supported browsers: ![Internet Explorer](https://www.aurigma.com/docs/us8/icons/ie8.png)![Firefox](https://www.aurigma.com/docs/us8/icons/firefox.png)![Google Chrome](https://www.aurigma.com/docs/us8/icons/chrome.png)![Safari](https://www.aurigma.com/docs/us8/icons/safari.png)
 
Gets or sets an HTML-like template of the data displayed inside a tile.

## Syntax
 
```
$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 **"&lt;p&gt;[FileName]&lt;/p&gt;&lt;p style="color: #555555"&gt;[FileType] [FileSize]&lt;/p&gt;"**.

## 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 name | Returned value |
| --- | --- |
| **`FileName`** | file name |
| **`FileSize`** | file size |
| **`FileType`** | file type |
| **`DateModified`** | file last modification date |
| **`Dimensions`** | image size in pixels; an empty string for non-image files |
| **`Description`** | user-given description of the file |
| **`Tag`** | tag of the file; the tag can be specified via the [tag](https://www.aurigma.com/docs/us8/JA_P_J_$au_file_tag.htm.md) 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 '&lt;' and the tag name, between '&lt;/' and the tag name, or inside '/&gt;'.
 
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](https://www.aurigma.com/docs/us8/CustomizingTilesViewSample2.png) ```
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
 
- [Aurigma.ImageUploader.UploadPane.TileTemplate ASP.NET PropertyActiveX/Java Uploader](https://www.aurigma.com/docs/us8/JA_P_Aurigma_ImageUploader_UploadPane_TileTemplate.htm.md)
- [UploadPane.TileTemplate PHP PropertyActiveX/Java Uploader](https://www.aurigma.com/docs/us8/JA_P_P_UploadPane_TileTemplate.htm.md)

### Manual
 
- [Customizing Tiles View in ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/customizing-tiles-view.htm.md)