Uihub

Appearance

Drop Zone Input ​

Default ​

Drop area ​


html
<label for="file">
    <div class="drop-container">
        <div class="drop-zone">
            <input type="file" id="file" hidden multiple="multiple" name="file" accept="pdf,svg,html">
            <span class="u-icon u-icon-32 text-primary-normal">upload</span>
            <div class="text-grey-normal">Drag your file or click to <span class="text-primary-normal">browse your file</span></div>
            <div class="text-grey-normal">Supported file types: <span>pdf,svg,html</span></div>
        </div>
    </div>
</label>

Progress bar ​

o-image
file name.txt
35.32KB
o-bin
20%
html
<div class="progress-tab">
    <div class="progress-upper">
        <span class="u-icon u-icon-32 text-grey-normal">o-image</span>
        <div class="file-details">
            <div class="file-name">file name.txt</div>
            <div class="file-size">35.32KB</div>
        </div>
        <span class="u-icon u-icon-32 text-grey-normal action-icon">o-bin</span>
    </div>
    <div class="progress-lower">
        <div class="progress-bar">
            <progress class="progress" value="20" max="100"></progress>
        </div>
        <div class="progress-percentage text-small">
            <span>20</span>%
        </div>
    </div>
</div>

One Upload ​

o-image
file name.txt
35.32KB
o-bin
20%
html
<div>
    <label for="file">
        <div class="drop-container">
            <div class="drop-zone">
                <input type="file" id="file" hidden multiple="multiple" name="file" accept="pdf,svg,html">
                <span class="u-icon u-icon-32 text-primary-normal">o-upload</span>
                <div class="text-grey-normal">Drag your file or click to <span class="text-primary-normal">browse your file</span></div>
                <div class="text-grey-normal">Supported file types: <span>pdf,svg,html</span></div>
            </div>
        </div>
    </label>
    <div class="progress-tab">
        <div class="progress-upper">
            <span class="u-icon u-icon-32 text-grey-normal">o-image</span>
            <div class="file-details">
                <div class="file-name">file name.txt</div>
                <div class="file-size">35.32KB</div>
            </div>
            <span class="u-icon u-icon-32 text-grey-normal action-icon">o-bin</span>
        </div>
        <div class="progress-lower">
            <div class="progress-bar">
                <progress class="progress" value="20" max="100"></progress>
            </div>
            <div class="progress-percentage text-small">
                <span>20</span>%
            </div>
        </div>
    </div>           
</div>

Two Uploads ​

o-file
file name.txt
35.32KB
o-bin
o-file
file name.txt
35.32KB
o-bin
20%
html
<div>
    <label for="file2">
        <div class="drop-container">
            <div class="drop-zone">
                <input type="file" id="file2" hidden multiple="multiple" name="file" accept="pdf,svg,html">
                <span class="u-icon u-icon-32 text-primary-normal">o-upload</span>
                <div class="text-grey-normal">Drag your file or click to <span class="text-primary-normal">browse your file</span></div>
                <div class="text-grey-normal">Supported file types: <span>pdf,svg,html</span></div>
            </div>
        </div>
    </label>
    <div class="progress-tab">
        <div class="progress-upper">
            <span class="u-icon u-icon-32 text-grey-normal">o-file</span>
            <div class="file-details">
                <div class="file-name">file name.txt</div>
                <div class="file-size">35.32KB</div>
            </div>
            <span class="u-icon u-icon-32 text-grey-normal action-icon">o-bin</span>
        </div>
    </div>
    <div class="progress-tab">
        <div class="progress-upper">
            <span class="u-icon u-icon-32 text-grey-normal">o-file</span>
            <div class="file-details">
                <div class="file-name">file name.txt</div>
                <div class="file-size">35.32KB</div>
            </div>
            <span class="u-icon u-icon-32 text-grey-normal action-icon">o-bin</span>
        </div>
        <div class="progress-lower">
            <div class="progress-bar">
                <progress class="progress" value="20" max="100"></progress>
            </div>
            <div class="progress-percentage text-small">
                <span>20</span>%
            </div>
        </div>
    </div>           
</div>

Failed Upload ​

o-image
file name.txt
35.32KB
o-rotate-right
html
<div>
    <label for="file3">
        <div class="drop-container">
            <div class="drop-zone">
                <input type="file" id="file3" hidden multiple="multiple" name="file" accept="pdf,svg,html">
                <span class="u-icon u-icon-32 text-primary-normal">o-file-upload</span>
                <div class="text-grey-normal">Drag your file or click to <span class="text-primary-normal">browse your file</span></div>
                <div class="text-grey-normal">Supported file types: <span>pdf,svg,html</span></div>
            </div>
        </div>
    </label>
    <div class="progress-tab">
        <div class="progress-upper">
            <span class="u-icon u-icon-32 text-grey-normal">o-image</span>
            <div class="file-details">
                <div class="file-name">file name.txt</div>
                <div class="file-size">35.32KB</div>
            </div>
            <span class="u-icon u-icon-32 text-warning-normal action-icon">o-rotate-right</span>
        </div>
    </div>           
</div>