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

Upload Settings

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.

<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-sm border-accent-2 background-primary rounded-sm width-full height-lg">
      Click or tap to upload files
    </label>                        
  </div>
</div>

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.

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

});