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 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.

Settings

Javascript settings available for the upload control.

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.

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

});