@filerobot/progress-panel v3.41.2
@filerobot/progress-panel
A panel showing the progress of uploading, downloading, transforming with possibility to cancel/retry/show location in Filerobot Media Asset Widget.
Usage
NPM
npm install --save @filerobot/progress-panel
YARN
yarn add @filerobot/progress-panel
then
import ProgressPanel from '@filerobot/progress-panel'
...
...
...
filerobot.use(ProgressPanel, propertiesObject)
From CDN
The plugin from CDN is found inside Filerobot
global object Filerobot.ProgressPanel
const ProgressPanel = window.Filerobot.ProgressPanel
...
...
...
filerobot.use(ProgressPanel, propertiesObject)
If you are using
@filerobot/explorer
plugin you don't need to manually import this plugin as it is being imported automatically there with its styles and the default idProgressPanel
.
Plugin's styles
import "@filerobot/core/dist/style.css";
or if you prefer the minified version
import "@filerobot/core/dist/style.min.css";
The plugin's css file should be imported after the Core's css file for having the styles shown correctly.
Example
const Filerobot = window.Filerobot;
const demoContainer = "scaleflex-tests-v5a";
const demoSecurityTemplateId = "......";
const filerobot = Filerobot.Core({
securityTemplateId: demoSecurityTemplateId,
container: demoContainer,
dev: false, // optional, default: false
});
const Explorer = Filerobot.Explorer;
const ProgressPanel = Filerobot.ProgressPanel
const XHRUpload = Filerobot.XHRUpload
filerobot
.use(Explorer, { target: "#filerobot-widget", inline: true })
.use(ProgressPanel, {
target: '#filerobot-progress-panel',
});
.use(XHRUpload)
Properties
target
Type: string
Default: undefined
The selector (ID, Class) of an HTML element or an existed HTML element that would be used for displaying the plugin.
NOTE If no target provided, it wll show inside Explorer.
locale
Type: object
.
Default:
strings: {
progressPanelProcessingHeaderLabel: 'Processing',
progressPanelProcessedHeaderLabel: 'Processed',
progressPanelHeaderItemsText: {
0: 'item',
1: 'items'
},
progressPanelEtaLeftText: '%{time} left',
progressPanelActivityCompleteLabel: 'Uploaded',
progressPanelActivityErrorLabel: 'Uploading failed',
progressPanelActivityProgressLabel: 'Uploading',
progressPanelCompleteActionTitle: 'Show file location',
progressPanelVideoActivityCompleteActionTitle: 'Show link',
progressPanelErrorActionTitle: 'Retry',
progressPanelProgressActionTitle: 'Cancel',
progressPanelPauseActionTitle: 'Pause',
progressPanelResumeActionTitle: 'Resume',
progressPanelAssetProcessingTitle: 'Asset is being processed',
uploadDelayedHint: 'It takes few seconds to complete processing, after you can use your uploaded assets.',
progressPanelArchiveCompleteLabel: 'Completed archive',
progressPanelArchiveFailedLabel: 'Failed archive',
progressPanelPreparingArchiveLabel: 'Preparing archive',
progressPanelDownloadingArchiveLabel: 'Downloading archive',
progressPanelDownloadingActivityLabel: 'Downloading',
progressPanelDownloadingActivityErrorLabel: 'Downloading failed',
progressPanelDownloadingActivityCompleteLabel: 'Downloaded',
progressPanelTranscodeActivityLabel: 'Transcoding',
progressPanelTranscodedActivityLabel: 'Transcoded',
progressPanelTranscodeErrorActivityLabel: 'Transcoding failed',
progressPanelCompressActivityLabel: 'Compressing',
progressPanelCompressedActivityLabel: 'Compressed',
progressPanelCompressErrorActivityLabel: 'Compressing failed',
progressPanelConvertActivityLabel: 'Converting',
progressPanelConvertedActivityLabel: 'Converted',
progressPanelConvertErrorActivityLabel: 'Converting failed',
progressPanelPreparingCsvActivityLabel: 'Preparing CSV',
progressPanelProcessingCsvActivityLabel: 'Processing CSV',
progressPanelProcessingCsvActivityErrorLabel: 'Processing CSV failed',
progressPanelProcessedCsvActivityLabel: 'Processed CSV'
}
Customizing some of the translations or the language's strings and replace the default locale.
Events
The progress panel plugin emits different events that you could subscribe to or add your handler to be called with the provided arguments passed while emitting/firing the event, the events are listed below with examples show the parameters for handler:
progressPanel-minimize
Emitted when progress panel is minimized.
value
: minimize value true/false.
progressPanel-toggle
Emitted when progress panel is opened/closed.
value
: toggle value true/false.
activities-reset
Emitted when progress panel is closed.
activity-progress
Emitted when activity is on progress.
params: object
:
id
: activity id.percentage
: activity progress percentage.
activity-update
Emitted when activity is updated.
params: object
:
id
: activity id.progress
: activity progress details.
activity-action
Emitted when activity action button is clicked.
params: object
:
id
: activity id.activity
: whole activity details.activityActionType
: action type(locate, play, pause, embed).
activity-error
Emitted when activity has an error.
params: object
:
id
: activity id.error
: error details.
activity-retry
Emitted when activity is retried.
params: object
:
id
: activity id.
activity-cancel
Emitted when activity is cancelled.
params: object
:
id
: activity id.
1 day ago
1 day ago
3 days ago
3 days ago
3 days ago
3 days ago
3 days ago
2 days ago
2 days ago
2 days ago
3 days ago
3 days ago
3 days ago
8 days ago
8 days ago
8 days ago
7 days ago
8 days ago
8 days ago
8 days ago
10 days ago
10 days ago
9 days ago
9 days ago
11 days ago
10 days ago
10 days ago
13 days ago
14 days ago
14 days ago
13 days ago
15 days ago
14 days ago
14 days ago
14 days ago
15 days ago
16 days ago
16 days ago
17 days ago
17 days ago
17 days ago
18 days ago
22 days ago
21 days ago
21 days ago
21 days ago
20 days ago
20 days ago
22 days ago
23 days ago
23 days ago
23 days ago
22 days ago
22 days ago
23 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
29 days ago
29 days ago
1 month ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago