Media WebUI

Upload Classes

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 are listed neatly with an optional file count at the end.

Classes

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 text at the center.
upload-text-right
Aligns the upload control text to the right.

Upload Settings

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

You can add scrollbars to the control by using the config options below. By default, scrollbars are turned off. From an aesthetic point of view, it can be better to adjust the height of the upload control to allow enough room for the anticipated number of files. But, there are additional settings to specify whether the filenames are listed and whether the file count is shown. If both showFiles and showCount are set to false, then the upload control will display the text "Files loaded." The default setting is to show files and a file count.

Upload

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. You don't have to include the upload icon or the icon position and color classes if you don't want them. To allow uploading multiple files, just include multiple on the input control.

Example
Markup
<div class="form-row">
  <div class="content-col-20">
    <input id="fileUpload1" type="file" class="upload upload-icon-right upload-icon-dark" />
    <label for="fileUpload1" class="input rounded-sm">
      Click or tap to upload file
    </label>        
  </div>
</div>

<div class="row-spacing-lg"></div>

<div class="form-row">
  <div class="content-col-20 accent-1">
    <input id="fileUpload2" type="file" multiple class="upload upload-icon-left upload-icon-light" />
    <label for="fileUpload2" class="control accent-1 width-full">
      Click or tap to upload files
    </label>      
  </div>
</div>

<div class="row-spacing-lg"></div>
    
<div class="form-row">
  <div class="content-col-20">
    <input id="fileUpload3" type="file" multiple class="upload upload-icon-dark upload-icon-bottom" />
    <label for="fileUpload3" class="control color-accent-2 border-md border-accent-2 background-primary rounded-sm width-full height-lg">
      Click or tap to upload files
    </label>                        
  </div>
</div>
Script
webui.ready(function() {

  ui("#fileUpload1").uploadControl({
    showCount: false
  });

  ui("#fileUpload2").uploadControl({
    showCount: false,
    scrollY: true
  });

  ui("#fileUpload3").uploadControl({
    scrollY: false
  });

});

Events

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.

Script
webui.ready(function() {
  
  ui( "#fileUpload1" ).on("ui.upload.change.before", function(e) {
    // Take some action
  });

  ui( "#fileUpload1" ).on("ui.upload.change.after", function(e) {
    // Take some action
  });

});