@filerobot/status-bar

The status-bar showing the progress of uploading/downloading process with possiblity to cancel/retry.

Usage

From NPM

The plugin is on NPM as @filerobot/status-bar

npm install --save @filerobot/status-bar

then

import StatusBar from '@filerobot/status-bar'
...
...
...
filerobot.use(StatusBar, optionsObject)

From CDN

The plugin from CDN is found inside Filerobot global object Filerobot.StatusBar

const StatusBar = window.Filerobot.StatusBar
...
...
...
filerobot.use(StatusBar, optionsObject)

If you are using @filerobot/explorer pluign you don't need to manually import this plugin as it is being imported automatically there with its styles and the default id Explorer:StatusBar Unless the Explorer id is changed then it would be respected.

Plugin's styles

import '@filerobot/core/dist/style.css'
import '@filerobot/status-bar/dist/style.css'

or if you prefer the minified version

import '@filerobot/core/dist/style.min.css'
import '@filerobot/status-bar/dist/style.min.css'

The plugin's css file should be imported after the Core's css file for having the styles shown correctly.

Options

id: string (optional)

default: 'StatusBar'

An unique identifier for the plugin to be indentified between the other plugins through it.

hideUploadButton: boolean (optional)

default: false

Hides the upload button shown in the status bar when there is new file(s) added when there is an uploading in progress.

hideRetryButton: boolean (optional)

default: false

Hides the retry button shown in the status bar when there any upload failed.

hideCancelButton: boolean (optional)

default: false

Hides the cancel button shown in the status bar when the upload process starts.

showProgressDetails: boolean (optional)

default: true

Hides the progress details shown in the status bar if true ex. (1 of 3 files uploaded, 450 KB of 1.5 MB uploaded, 30s ETA).

locale: object (optional)

default:

strings: {
  uploading: 'Uploading',
  compressing: 'Compressing',
  upload: 'Upload',
  complete: 'Completed!',
  finished: 'Completed: 100%',
  failed: 'Failed',
  paused: 'Paused',
  retry: 'Retry',
  cancel: 'Cancel',
  pause: 'Pause',
  resume: 'Resume',
  filesUploadedOfTotal: {
    0: '%{complete} of %{smart_count} file uploaded',
    1: '%{complete} of %{smart_count} files uploaded'
  },
  dataUploadedOfTotal: '%{complete} of %{total}',
  xTimeLeft: '%{time} left',
  uploadXFiles: {
    0: 'Upload %{smart_count} file',
    1: 'Upload %{smart_count} files'
  },
  uploadXNewFiles: {
    0: 'Upload +%{smart_count} file',
    1: 'Upload +%{smart_count} files'
  },
  xMoreFilesAdded: {
    0: '%{smart_count} more file added',
    1: '%{smart_count} more files added'
  },
  downloadCompressing: 'Archiving selected items to be downloaded as one archive: %{percent}%',
  downloading: 'Downloading: %{percent}%',
  downloadedOfTotal: '%{completed} of %{total}',
  someFileUploadFailed: 'Some of files upload failed'
}

Customizing some of the translations or the language's strings and replace the default locale.