Status Bar Example

The StatusBar plugin shows detailed upload/processing progress with pause/resume/cancel buttons.

Status Bar [installed]

Console output:

On this page we're using the following HTML snippet:

<!-- Basic SME Uploader styles -->
<link rel="stylesheet" href="/sme-uploader/sme-uploader.min.css">

<div class="checkbox">
  <label for="statusbar" class="switch">
    <input type="checkbox" id="statusbar" disabled checked/>
    <i> </i>
    <span>Status Bar [installed]</span>
  </label>
</div>

<div class="grid">
  <div class="column-full">
    <div class="sme-uploader-input"></div>
    <div class="sme-uploader-input-progress"></div>
  </div>
</div>

Along with this JavaScript:

require('es6-promise/auto');
require('whatwg-fetch');
const SmeUploader = require('@sme-uploader/core');
const FileInput = require('@sme-uploader/file-input');
const StatusBar = require('@sme-uploader/status-bar');
const Tus = require('@sme-uploader/tus');

const uploaderOne = new SmeUploader({ debug: true, autoProceed: true });
uploaderOne
  .use(FileInput, { target: '.sme-uploader-input', pretty: false })
  .use(Tus, { endpoint: 'https://master.tus.io/files/' })
  .use(StatusBar, {
    target: '.sme-uploader-input-progress',
    hideUploadButton: true,
    hideAfterFinish: false
  });

Please see documentation for details.

Examples

Status Bar Example