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.

Filename	Size

No file selected.

Source code

HTML JavaScript

<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
  </button>
  <small class="text-secondary">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="icon-close text-danger d-none"></i>
        <i id="is-valid" class="icon-check 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-secondary">
        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')) {
    $('#preview').attr('src', file.dataURL).removeClass('d-none');
  } else {
    $('#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:

Validation	Description
`data-maxsize`	Validates the size of the file. You can also define the size unit e.g., 1024B, 100KB, 2.4MB, 5GB.
`data-type`	Validates 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.

Warranties

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.

Event	Description
`file:change`	Triggered when the user selects a file.

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

Property	Description
`dataURL`	Base64 data URL.
`errors`	File 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.dataURL is loaded by the component
  console.log('Base64 URL: ', file.dataURL);

  // file.errors is binded by the component after validation
  if (file.errors.length) {
    console.log('File errors: ', file.errors);
  }
});