File Template

How to customize the HTML file template

The file style, HTML and the elements of the uploader can be customized by overriding the default template using the fileTemplate option. The file template is made of several elements: Upload Button, Remove Button, Delete Button, Info Button, File Name, File Size, Progress Bar and more...
All these HTML element can be customize in their style and position following some basic rules:

  • Preserve the CSS class of elements. Example the "Upload Button" button should have "ax-upload" class in order to allow the uploader to bind the correct click event.
  • New HTML elements can be added.
  • All elements are optional, can be removed, Real Upload will not crash in any js error if any element is not present.
  • The button text element should have the "ax-btn-text" CSS class in order to be translated.
  • Please note that the HTML "ax-file-wrapper" element is added always by the uploader, it is just a wrapper element
The CSS classes of the HTML elements are used for 3 main reasons: translation, styling and event binding. If the any CSS class is removed from the element then none of the three action above will occur on that element.

Default File HTML Template

                        
<!-- Main File wrapper element created by the uploader -->
<div class="ax-file-wrapper" title="20150809_160926.jpg">

    <!-- Preview container -->
    <a class="ax-prev-container" style="background: none;">
        <img style="cursor: pointer;" class="ax-preview" src="blob" alt="Preview">
    </a>

    <!-- File name, File size container -->
    <div class="ax-details">
        <div class="ax-file-name" title="20150809_160926.jpg">20150809_160926.jpg</div>
        <div class="ax-file-size" title="25.67 KB">25.67 KB</div>
    </div>

    <!-- Progress information-->
    <div class="ax-progress-data">
        <div class="ax-progress">
            <div class="loader ax-progress-bar" style="width: 0%;"></div>
            <div class="ax-progress-info" title="Ready for upload">Ready for upload</div>
        </div>

        <div class="ax-progress-stat"></div>
    </div>

    <!-- Buttons container-->
    <div class="ax-toolbar">
        <a class="ax-upload ax-button" title="Start upload">
            <span class="ax-upload-icon ax-icon"></span>
            <span class="ax-btn-text">Upload</span>
        </a>
        <a class="ax-remove ax-button" title="Remove file from queue">
            <span class="ax-clear-icon ax-icon"></span>
            <span class="ax-btn-text">Remove</span>
        </a>
        <a class="ax-delete ax-button ax-disabled" title="File still to be uploaded">
            <span class="ax-delete-icon ax-icon"></span>
            <span class="ax-btn-text">Delete</span>
        </a>
        <a class="ax-info ax-button" title="Show file exif info">
            <span class="ax-info-icon ax-icon"></span>
            <span class="ax-btn-text">Info</span>
        </a>
    </div>
</div>

Result example

Main Template

Illustration image of the file template HTML

The default template include icons and text for the buttons. In the following example please note the the template on the left has different status from the image (image screens has been done during an upload state).

File Template