Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

statedescriptionmockup
Initial State

When this component is initialized, a table header with column categories is present. An 'add files' button is also present, allowing the user to initiate a multiple file upload.

Live Example

Add via 'Add Files' ButtonA user may initiate a multi file upload by clicking the 'Add Files' button, located at the upper right of the component. The user will then be presented with the system file browser, from which multiple files can be selected.
Add via 'Drag and Drop'

A user may also initiate a multi file upload by dragging files onto a dropzone, with the following conditions:

  • When no files are present and a user hovers over the component, the table will be faded and a message will be displayed (as an overlay) to inform the user that files may be added by 'drag and drop'.
  • If files have already been uploaded, the 'Drop Files Here' message will only appear on hover WHILE dragging files onto the component.

Live Example

Uploading

Once the user initiates a multi file upload (either by button or drag and drop), the table will temporarily be replaced with a progress bar, with a button to cancel out of the upload process if necessary.

Live Example

Populated (Default View)

Once files are uploaded, the table is populated with information about each file. The default columns are File Name, Size, Date Added, and Actions.

Live Example  

Populated (Custom View)

The component may also be configured as to allow the user to enter additional data about each file that was uploaded.

Live Example

Default State

Markup

Code Block
themeEclipse
linenumberstrue
languagehtml/xml
                <div style="position: relative;">
                    <table class="table table-condensed uif-hasAddLine uif-has-actions" aria-describedby="">
                        <thead >
                            <tr>
                                <th>File Name</th>
                                <th>Detail 1</th>
                                <th>Detail 2</th>
                                <th>Detail 3</th>
                                <th>Actions/th> 
                            </tr>
                        </thead>
                        <tbody  aria-live="polite" aria-relevant="all" role="alert" style="display:">
                        </tbody>
                    </table>
                    <div class="dropzone" style=""> </div>
                </div>

...