Main Template

How to customize the HTML template

The file style, HTML and the elements of the uploader can be customized by overriding the default temaplte using the mainTemplate option. The main template is made of a title, upload button, Add Files button and Remove buttons. The HTML of the main template can be change and customize with the following rules:

  • Preserve the CSS class of elements. Example the "Add Files" buttons should have "ax-browse-c" class
  • 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
  • Even the file list element (ax-file-list) is optional but if it is removed then the user should provide manually an element that shows the selected files or make them notice to the user.
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 Main HTML Template

                        
<div class="ax-main-container">
    <h5 class="ax-main-title">Drag &amp; Drop file here</h5>
    <div class="ax-main-buttons">
        <!-- HTML for the Add File button -->
        <a class="ax-browse-c ax-button" title="Add Files">
            <span class="ax-browse-icon ax-icon"></span>
            <span class="ax-browse-text ax-text">Add Files</span>
            <input type="file" multiple="multiple" class="ax-browse">
        </a>

        <!-- Upload all button -->
        <a class="ax-upload-all ax-button" title="Upload All">
            <span class="ax-upload-icon ax-icon"></span>
            <span class="ax-upload-text ax-text">Upload All</span>
        </a>

        <!-- Remove all button -->
        <a class="ax-clear ax-button" title="Remove All">
            <span class="ax-clear-icon ax-icon"></span>
            <span class="ax-clear-text ax-text">Remove All</span>
        </a>
    </div>
    <div class="ax-file-list"></div>
</div>

Result

Main Template

Example of custom valid template

Main template without buttons, only with the drag and drop area.

                        <div id="targetElement"></div>
    <script type="text/javascript">
        var mainTemplateHTML = '<div class="ax-main-container"  style="border: 2px solid orangered; width: 25em; height: 15em; border-radius: 34px;">'+
        '<h5 class="ax-main-title">Drag &amp; Drop file here</h5>'+
        '<div class="ax-file-list"></div>'+
    '</div>';
        var uploader = new RealUploader("#targetElement", {
            accept: "image/*",
            mainTemplate: mainTemplateHTML
        });
    </script>

Result

Custom Template

Illustration with arrows of the code and template

The default template include icons and text for the button.

Main Template