File manager

The file manager is a component that conect to the device's storage and allow users to select files to submit. See the example below:

Only .jpeg and .png and maximum 1MB.
No file selected.
Source code
<div class="form-group">
  <button type="button" class="btn btn-primary" data-toggle="file-manager" data-maxsize="1MB" data-type="image/jpeg,image/png">
    <i class="icon-folder-open-o"></i> Select a file
  <small class="text-secondary">Only .jpeg and .png and maximum 1MB.</small>
<div class="table-responsive">
  <table class="table">
    <tr id="file-data" class="d-none">
      <td class="align-middle">
        <img id="file-preview" class="rounded d-none" width="64">
        <span id="file-name"></span>
        <i id="is-invalid" class="icon-close text-danger d-none"></i>
        <i id="is-valid" class="icon-check text-success d-none"></i>
      <td class="align-middle">
        <span id="file-size"></span>
    <tr id="file-empty">
      <td colspan="2" class="text-secondary">
        No file selected.
$('[data-toggle="file-manager"]').on('file:change', function (e, file) {
  $('#file-size').text((file.size / 1024).toFixed(2) + ' KB');
  $('#is-invalid').toggleClass('d-none', !file.errors.length);
  $('#is-valid').toggleClass('d-none', !!file.errors.length);

  if (file.type.startsWith('image')) {
    $('#preview').attr('src', file.dataURL).removeClass('d-none');
  } else {


File validation

The file manager has an built-in validation configured by attribute options:

data-maxsizeValidates the size of the file. You can also define the size unit e.g., 1024B, 100KB, 2.4MB, 5GB.
data-typeValidates the type of the file. You need to use MIME types for validation e.g., image/png, application/pdf. Use comma for separate multiple MIME types.

Wrong values for data-maxsize or data-type will result in invalid file after validation.


Events can be used by developer to interact with the component and write custom logic.

file:changeTriggered when the user selects a file.

After the file selection a few properties are added to the file by the component:

dataURLBase64 data URL.
errorsFile errors after validation:
  • maxsize: The file exceeded the allowed maximum size.
  • type: The selected file type is not allowed.
Source code