Multiselect Uploader

File uploaders allow users to upload content of their own to the application. A file uploader is commonly found in forms, but can also live as a standalone element.

Code

Add either one ZIP file, or any XPT V5, CSV, SAS7BDAT, XLSX files

Total upload size limit is 200 MB.

Add files

Twirl/HTML

<section id="@id" class="multiselect-upload-container" xmlns="http://www.w3.org/1999/html">
    <div class="multiselect-upload multiselect-upload--empty-state">
        @emptyState() {
            <span class="d-block mb-4">@icon(icon="cloud-arrow-up", weight="solid", classes="empty-state__icon empty-state__icon--md")</span>
            Add either one ZIP file, or any <span>@{
                if (acceptedFileFormats.length <= 2) {
                    acceptedFileFormats.map(_.toUpperCase).mkString(", or ")
                } else {
                    acceptedFileFormats.map(_.toUpperCase).mkString(", ")
                }
            }</span> @Messages("files")
        } {
            <p class="js-empty-state-msg"></p>
            @if(requiresLoading) {
                <a class="btn btn--brand btn-add-remove add-more" disabled="disabled">@icon(icon="spinner", weight="solid", classes="fa-spin")</a>
            } else {
                <a class="btn btn--brand btn-add-remove add-more">@Messages("Add files")</a>
            }
        } {@Html("")}
    </div>

    <div class="multiselect-upload multiselect-upload--has-files" style="display: none;">
        <header class="multiselect-upload__header">
            <div class="multiselect-upload__cell multiselect-upload__cell--file-path">
                <a class="btn-add-remove add-more">@Messages("Add more")</a>
            </div>
            <div class="multiselect-upload__cell multiselect-upload__cell--action">
                <a class="btn-add-remove remove-all">@Messages("Remove all")</a>
            </div>
        </header>

        <div class="multiselect-upload__body"></div>

        <footer class="multiselect-upload__footer">
            <div class="multiselect-upload__cell multiselect-upload__cell--total-count">
                <span class="message message-error file-count-message"></span>
                <span class="message message--sm">@Messages("Accepted formats: ") <strong>either</strong> one ZIP file, <strong>or</strong> any @{acceptedFileFormats.map(_.toUpperCase).mkString(", ")} files</span>
            </div>
            <div class="multiselect-upload__cell multiselect-upload__cell--help-text">
                <span class="message message-error file-size-message"></span>
                <span class="message message--sm file-size-aspera-message"></span>
            </div>
        </footer>
    </div>
</section>

In Practice

The Multiselect Uploader allows users to upload more then one file at once. It may be used anywhere users need to add one or more files.

Files are not automatically uploaded to the application. Selecting a file uploads the file to the frontend only.
The filename and an upload action button appear once a file is uploaded to the frontend.

Design resources

View component in Figma