Media WebUI

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>
HTML
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
  });

});
JS
Upload Control Height

Avoid 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
  });

});
JS