Skip to content
STYLESCAPE

Drop zone

Examples for the ss-c-dropzone module. The surface is the <label> of a visually hidden file input, so a click, or Enter/Space on the focused input, opens the picker without JavaScript. DropZoneManager (data-ss="dropzone") adds drag-and-drop: the --dragover and --invalid states, accept/multiple/max-size checks, the dropped files copied into the input, a status message and the file list, plus ss:dropzone:files and ss:dropzone:invalid events.

Idle

    HTML 
    <div class="ss-c-dropzone" data-ss="dropzone" data-ss-dropzone-max-size="10485760">
            <input id="dz-scans" name="scans" type="file" class="ss-c-dropzone__input" accept="image/*,.pdf" multiple aria-describedby="dz-scans-hint">
            <label for="dz-scans" class="ss-c-dropzone__surface">
                <span class="ss-c-dropzone__icon" aria-hidden="true"></span>
                <span class="ss-c-dropzone__title">Drop scans here or <span class="ss-c-dropzone__browse">browse</span></span>
                <span class="ss-c-dropzone__hint" id="dz-scans-hint">Images or PDF, up to 10 MB each</span>
            </label>
            <p class="ss-c-dropzone__status" role="status"></p>
            <ul class="ss-c-dropzone__files"></ul>
        </div>

    Drag over

    HTML 
    <div class="ss-c-dropzone ss-c-dropzone--dragover">
            <input id="dz-over" type="file" class="ss-c-dropzone__input" multiple>
            <label for="dz-over" class="ss-c-dropzone__surface">
                <span class="ss-c-dropzone__icon" aria-hidden="true"></span>
                <span class="ss-c-dropzone__title">Release to add 3 files</span>
            </label>
        </div>

    Invalid, with files

    File type not accepted: plan.dwg.

    • building-a.ifc4.2 MB
    HTML 
    <div class="ss-c-dropzone ss-c-dropzone--invalid">
            <input id="dz-invalid" type="file" class="ss-c-dropzone__input" accept=".ifc" aria-invalid="true" aria-describedby="dz-invalid-hint">
            <label for="dz-invalid" class="ss-c-dropzone__surface">
                <span class="ss-c-dropzone__icon" aria-hidden="true"></span>
                <span class="ss-c-dropzone__title">Drop an IFC model or <span class="ss-c-dropzone__browse">browse</span></span>
                <span class="ss-c-dropzone__hint" id="dz-invalid-hint">One .ifc file</span>
            </label>
            <p class="ss-c-dropzone__status" role="status">File type not accepted: plan.dwg.</p>
            <ul class="ss-c-dropzone__files">
                <li class="ss-c-dropzone__file"><span class="ss-c-dropzone__file-name">building-a.ifc</span><span class="ss-c-dropzone__file-size">4.2 MB</span></li>
            </ul>
        </div>

    Compact and disabled

    HTML 
    <div style="display: grid; gap: 12px">
            <div class="ss-c-dropzone ss-c-dropzone--compact">
                <input id="dz-compact" type="file" class="ss-c-dropzone__input">
                <label for="dz-compact" class="ss-c-dropzone__surface">
                    <span class="ss-c-dropzone__icon" aria-hidden="true"></span>
                    <span class="ss-c-dropzone__title">Attach a file</span>
                </label>
            </div>
            <div class="ss-c-dropzone ss-c-dropzone--compact">
                <input id="dz-disabled" type="file" class="ss-c-dropzone__input" disabled>
                <label for="dz-disabled" class="ss-c-dropzone__surface">
                    <span class="ss-c-dropzone__icon" aria-hidden="true"></span>
                    <span class="ss-c-dropzone__title">Uploads are closed</span>
                </label>
            </div>
        </div>