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.
Selected file
FilenameSize
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="fa fa-folder-open"></i> Select a file
  </button>
  <small class="text-muted">Only .jpeg and .png and maximum 1MB.</small>
</div>
<div class="table-responsive">
  <table class="table">
    <tr>
      <th>Filename</th>
      <th>Size</th>
    </tr>
    <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="fa fa-times-circle-o text-danger d-none"></i>
        <i id="is-valid" class="fa fa-check-circle-o text-success d-none"></i>
      </td>
      <td class="align-middle">
        <span id="file-size"></span>
      </td>
    </tr>
    <tr id="file-empty">
      <td colspan="2" class="text-muted">
        No file selected.
      </td>
    </tr>
  </table>
</div>
$('[data-toggle="file-manager"]').on('file:change', function (e, file) {
  $('#file-name').text(file.name);
  $('#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')) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      var url = URL.createObjectURL(file);
      $('#file-preview').attr('src', url).removeClass('d-none');
    };
  } else {
    $('#file-preview').removeAttr('src').addClass('d-none');
  }

  $('#file-empty').addClass('d-none');
  $('#file-data').removeClass('d-none');
});

File validation

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

Options
ValidationDescription
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

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

Events
EventDescription
file:changeTriggered when the user selects a file.

After the file selection the component adds the errors property to the file.

Properties
PropertyDescription
errorsFile errors after validation:
  • maxsize: The file exceeded the allowed maximum size.
  • type: The selected file type is not allowed.
Source code
$('[data-toggle="file-manager"]').on('file:change', function (e, file) {
  // file.errors is binded by the component after validation
  if (file.errors.length) {
    console.log('File errors: ', file.errors);
  }
});