File Selection - ZUI Documentation

Summary

The file selection pattern utilizes a dialog which loads files via AJAX which the user can choose from.

There are no attributes defined for this pattern.

Name	Description
`zui-file-selection-selector`	The selector for the file selection dialog.

Example

File 1

Markup

<div class="zui-file-selection-trigger-container" data-zui-file-selection-trigger="#file-selection-dialog">
    <input type="hidden" value="">

    <p>
        <img src="img/avatars/a.jpg" alt="" tabindex="1" class="zui-file-selection-trigger-thumb">
    </p>
</div>

<div class="zui-file-selection zui-dialog zui-dialog-small" id="file-selection-dialog">
    <div class="zui-dialog-header">
        <h2>Select File</h2>
        <i class="zui-icon zui-icon-x"></i>
    </div>

    <div class="zui-dialog-page">
        <div class="zui-dialog-page-body">
            <div class="zui-dialog-panel zui-dialog-panel-no-padding">
                <ul class="zui-file-selection-items">
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="111" data-zui-file-selection-preview="img/avatars/a.jpg">
                            <img src="img/avatars/a.jpg" alt="Select this file">
                        </button>
                    </li>
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="222" data-zui-file-selection-preview="img/avatars/b.jpg">
                            <img src="img/avatars/b.jpg" alt="Select this file">
                        </button>
                    </li>
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="333" data-zui-file-selection-preview="img/avatars/c.jpg">
                            <img src="img/avatars/c.jpg" alt="Select this file">
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="zui-dialog-footer">
        <div class="zui-dialog-footer-left">
            <div class="zui-dialog-hint">
                Click on the thumbnail to select the file.
            </div>
        </div>

        <div class="zui-dialog-footer-right">
            <a href="#" data-zui-dialog-button="cancel">Cancel</a>
        </div>
    </div>
</div>

<div class="zui-file-selection-trigger-container" data-zui-file-selection-trigger="#file-selection-dialog-label">
    <input type="hidden" value="">
    <h3 class="zui-file-selection-trigger-label">File 1</h3>
    <p>
        <img src="img/avatars/a.jpg" alt="" tabindex="1" class="zui-file-selection-trigger-thumb">
    </p>
</div>

<div class="zui-file-selection zui-dialog zui-dialog-small" id="file-selection-dialog-label">
    <div class="zui-dialog-header">
        <h2>Select File</h2>
        <i class="zui-icon zui-icon-x"></i>
    </div>

    <div class="zui-dialog-page">
        <div class="zui-dialog-page-body">
            <div class="zui-dialog-panel zui-dialog-panel-no-padding">
                <ul class="zui-file-selection-items">
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="111" data-zui-file-selection-preview="img/avatars/a.jpg">
                            <img src="img/avatars/a.jpg" alt="Select this file">
                            <div>File 1</div>
                        </button>
                    </li>
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="222" data-zui-file-selection-preview="img/avatars/b.jpg">
                            <img src="img/avatars/b.jpg" alt="Select this file">
                            <div>File 2</div>
                        </button>
                    </li>
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="333" data-zui-file-selection-preview="img/avatars/c.jpg">
                            <img src="img/avatars/c.jpg" alt="Select this file">
                            <div>File 3</div>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="zui-dialog-footer">
        <div class="zui-dialog-footer-left">
            <div class="zui-dialog-hint">
                Click on the thumbnail to select the file.
            </div>
        </div>

        <div class="zui-dialog-footer-right">
            <a href="#" data-zui-dialog-button="cancel">Cancel</a>
        </div>
    </div>
</div>

<div class="zui-file-selection-trigger-container" data-zui-file-selection-trigger="#file-selection-dialog-toolbar">
    <input type="hidden" value="">
    <h3 class="zui-file-selection-trigger-label">File 1</h3>
    <p>
        <img src="img/avatars/a.jpg" alt="" tabindex="1" class="zui-file-selection-trigger-thumb">
    </p>
</div>

<div class="zui-file-selection zui-dialog zui-dialog-small" id="file-selection-dialog-toolbar">
    <div class="zui-dialog-header">
        <h2>Select File</h2>
        <i class="zui-icon zui-icon-x"></i>
    </div>

    <div class="zui-dialog-page">
        <div class="zui-dialog-page-body">
            <div class="zui-dialog-panel zui-dialog-panel-no-padding">
                <div class="zui-file-selection-toolbar">
                    <div class="zui-file-selection-toolbar-left">
                        <input type="text" placeholder="Search query" tabindex="1">
                    </div>

                    <div class="zui-file-selection-toolbar-right">
                        <form action="./file-selection-upload.json"
                              method="post"
                              enctype="multipart/form-data"
                              data-zui-file-selection-upload-error="Failed to upload the file."
                              data-zui-file-selection-upload-success="Successfully added the file.">
                            <span class="zui-file-selection-upload-status">Failed to upload the file.</span>
                            <button class="zui-button-file" tabindex="1">
                                <input type="file" required/>

                                <span>
                                    <i class="zui-icon zui-icon-upload"></i>
                                    Upload
                                </span>
                            </button>
                        </form>
                    </div>
                </div>

                <ul class="zui-file-selection-items">
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="111"
                                data-zui-file-selection-preview="img/avatars/a.jpg">
                            <img src="img/avatars/a.jpg" alt="Select this file">
                            <div class="zui-file-selection-label">File 1</div>
                        </button>
                    </li>
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="222"
                                data-zui-file-selection-preview="img/avatars/b.jpg">
                            <img src="img/avatars/b.jpg" alt="Select this file">
                            <div class="zui-file-selection-label">File 2</div>
                        </button>
                    </li>
                    <li title="Select this file">
                        <button tabindex="1" data-zui-file-selection-id="333"
                                data-zui-file-selection-preview="img/avatars/c.jpg">
                            <img src="img/avatars/c.jpg" alt="Select this file">
                            <div class="zui-file-selection-label">File 3</div>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="zui-dialog-footer">
        <div class="zui-dialog-footer-left">
            <div class="zui-dialog-hint">
                Click on the thumbnail to select the file.
            </div>
        </div>

        <div class="zui-dialog-footer-right">
            <a href="#" data-zui-dialog-button="cancel">Cancel</a>
        </div>
    </div>
</div>