Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 19 Next »

Multiple File Upload

Purpose: Allows a user to upload multiple files to a web form with a single process.

Category: Forms / File Upload

Related jiras: UXI-89 - Data cannot be retrieved due to an unexpected error

Process Phase: Drafting

Version: 1.0



Table of Contents


The license could not be verified: License Certificate has expired!


Document all states this component can have. All components will have at least one state, the default state. Repeat the state specification for each additional state. Examples might include: 'Active State', 'Disabled State', etc. Note additional states can refer to the default state to eliminate duplication.

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


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

Uploading - Error

In the case that an error is caused by the upload, the user will see messaging to indicate the nature of the error, with a cancel button to dismiss the error and cancel the upload. Possible message types could include:

  • You have included a file type with the extension .<xx>, which is not accepted.
  • Uploads greater than <xx>.mb are not supported.

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. At this point, the user can take the following actions:

  • Download and view a file from the list, by clicking on the file name hyperlink
  • Delete a file from the list


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. At this point, the user can take the following actions:

  • Download and view a file from the list, by clicking on the file name hyperlink
  • Delete a file from the list
  • Add additional information about the file by filling out the form controls on each individual row.

Live Example

Default State



The jQuery File Upload Plugin is built to leverage the Bootstrap css framework. Additional css styling needs are not needed.


This component uses the jQuery File Upload Plugin, which is released under the MIT license (approved by the Kuali Foundation). Other dependancies are as follows:

  • jQuery v. 1.6+ 

  • jQuery UI widget factory v. 1.9+ (included with plugin) 

  • jQuery Iframe Transport plugin (included with plugin)

  • Bootstrap CSS v.3.0+


List any options (properties) this component has.   This would go in developer documentation.

NameOptional?Default Value (if any)Validations (if any)Additional Notes


Option Sets

List any additional option sets that should be provided for this component. These are configurations of the default values that will be available (component configurations, or beans).


Keyboard Shortcuts

Keyboard shortcut requirements are undetermined at this time.


There are no known requirements for variances (i.e. mobile layouts, responsive design) at this time.

  • No labels