Upload
Upload Examples
For the file upload control it is important that the label is associated with the input control by id. Also note that upload specific CSS classes are applied to the input control, but general CSS classes are applied to the label. To allow uploading multiple files, just include the multiple attribute on the input control.
The upload control works in the same way as the native browser file upload, but is re-styled in such a way that single or multiple files can optionally be listed neatly with a file count at the top.
<div class="row"> <div class="col"> <input id="fileUpload1" type="file" class="upload upload-icon-right upload-icon-dark" /> <label for="fileUpload1" class="control text-sm rounded-sm"> Click or tap to upload file </label> </div> </div> <div class="row-spacing-lg"></div> <div class="row"> <div class="col accent-1"> <input id="fileUpload2" type="file" multiple class="upload upload-icon-left upload-icon-dark" /> <label for="fileUpload2" class="control text-lg width-full"> Click or tap to upload files </label> </div> </div> <div class="row-spacing-lg"></div> <div class="row"> <div class="col"> <input id="fileUpload3" type="file" multiple class="upload upload-icon-bottom upload-icon-light" /> <label for="fileUpload3" class="control info-dark border-sm border-info rounded-sm width-full height-lg"> Click or tap to upload files </label> </div> </div>
webui.ready( () => { ui("#fileUpload1").uploadControl({ showFiles: true, showCount: false, scrollX: false, scrollY: false }); ui("#fileUpload2").uploadControl({ showFiles: true, showCount: true, scrollX: false, scrollY: false }); ui("#fileUpload3").uploadControl({ showFiles: true, showCount: true, scrollX: false, scrollY: true }); });
Upload Control HeightAvoid using input and input-* classes for upload controls as the height will be restricted and icons may be misaligned. If a fixed height is required, the height-* or height-control-* utility classes can be used with the scrollY configuration property set to true
NOTE: The control class can be used to add the default form control style.
Classes
The classes below are optional except the upload class which is required.
Class | Description |
---|---|
upload | Defines the upload control. |
upload-icon-left | Add an upload icon to the left of the file list. |
upload-icon-top | Add an upload icon above the file list. |
upload-icon-right | Add an upload icon to the right of the file list. |
upload-icon-bottom | Add an upload icon below the file list. |
upload-icon-light | Specifies that the upload icon will be light in color. |
upload-icon-dark | Specifies that the upload icon will be dark in color. |
upload-text-center | Aligns the upload control file list at the center. Default: left aligned. |
upload-text-right | Aligns the upload control file list to the right. Default: left aligned. |
Settings
Javascript settings available for the upload control.
Setting | Description |
---|---|
scrollX | Whether the upload control will always show a horizontal scrollbar. Can be true or false. Default: false |
scrollY | Whether the upload control will always show a vertical scrollbar. Can be true or false. Default: false |
showCount | Whether the upload control will display a file count total after the file list. Can be true or false. Default: true |
showFiles | Whether the upload control will display a list of files added to the files array. Can be true or false. Default: true |
By default, scrollbars are turned off and the height of the upload control will increase automatically to accomodate its content. If a fixed height is required then scrollbars can be added using the control initialisation settings. If both showFiles and showCount are set to false then the upload control will display the text "Files ready." after the file selection has been made. The settings showCount and showFiles are switched on by default.
Events
Upload Event Callbacks
There are 2 event callbacks that can be used, ui.upload.change.before and ui.upload.change.after. The before event is fired just before the files are loaded into the control, and the after event is fired just after the files are loaded. The following script shows how to setup the event callbacks.
webui.ready( () => { ui( "#fileUpload1" ).on("ui.upload.change.before", (e) => { // Take some action }); ui( "#fileUpload1" ).on("ui.upload.change.after", (e) => { // Take some action }); });