npm package: @filerobot/status-bar
Description: A progress bar for Filerobot, with many bells and whistles.
Latest version: 3.20.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@filerobot/status-bar`

[![Plugins][plugins-image]](#plugins)
[![Website][filerobot-image]][sfx-url]
[![Version][filerobot-version]][version-url]
[![Scaleflex team][made-by-image]][sfx-url]
[![License][license-image]][license-url]
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]


<div align='center'>
<img title="Filerobot Widget logo" alt="Filerobot Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
</div>

The status-bar showing the progress of uploading/downloading process with possiblity to cancel/retry in [Filerobot Media Asset Widget](https://www.npmjs.com/package/@filerobot/readme).

## Usage

### NPM

```bash
npm install --save @filerobot/status-bar
```
### YARN

```bash
yarn add @filerobot/status-bar
```

then

```js
import StatusBar from '@filerobot/status-bar'
...
...
...
filerobot.use(StatusBar, propertiesObject)
```

### From CDN

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

```js
const StatusBar = window.Filerobot.StatusBar
...
...
...
filerobot.use(StatusBar, propertiesObject)
```

> If you are using [`@filerobot/explorer`](../@filerobot/explorer/#filerobotexplorer) plugin you don't need to manually import this plugin as it is being imported automatically there with its styles and the default id `StatusBar`.

### Plugin's styles

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

or if you prefer the minified version

```js
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](../@filerobot/core/#modules-styles) for having the styles shown correctly.

## Properties

### `hideUploadButton`

<u>Type:</u> `boolean`.

<u>Default:</u> `false`

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

<u>Type:</u> `boolean`.

<u>Default:</u> `false`

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

### `showProgressDetails`

<u>Type:</u> `boolean`.

<u>Default:</u> `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`

<u>Type:</u> `object`.

<u>Default:</u>

```js
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.

<!-- #### `hidePauseResumeButton: boolean` *(optional)*

*default:* `false`

Hides the pause/resume button shown in the status bar when an upload in-progress/paused -->

<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@filerobot/status-bar
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@filerobot/status-bar
[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th

[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
[plugins-image]: https://img.shields.io/static/v1?label=Filerobot&message=Plugins&color=yellow&style=for-the-badge
[filerobot-image]: https://img.shields.io/static/v1?label=Filerobot&message=website&color=orange&style=for-the-badge
[filerobot-version]: https://img.shields.io/npm/v/@filerobot/status-bar?label=Version&style=for-the-badge&logo=npm
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox