diff --git a/src/core/Core.js b/src/core/Core.js
index c15cd2b9a..cd18346b4 100644
--- a/src/core/Core.js
+++ b/src/core/Core.js
@@ -546,7 +546,7 @@ class Uppy {
{ error: error, isPaused: true }
)
updatedFiles[fileID] = updatedFile
- this.setState({files: updatedFiles})
+ this.setState({ files: updatedFiles, error: error })
const fileName = this.state.files[fileID].name
let message = `Failed to upload ${fileName}`
diff --git a/src/plugins/StatusBar/StatusBar.js b/src/plugins/StatusBar/StatusBar.js
index 370fe358e..95b58438d 100644
--- a/src/plugins/StatusBar/StatusBar.js
+++ b/src/plugins/StatusBar/StatusBar.js
@@ -141,49 +141,50 @@ const ProgressBarUploading = (props) => {
`
}
-const ProgressBarComplete = ({ totalProgress }) => {
+const ProgressBarComplete = ({ totalProgress, i18n }) => {
return html`
-
-
`
}
const pauseResumeButtons = (props) => {
- const title = props.resumableUploads
- ? props.isAllPaused
- ? 'resume upload'
- : 'pause upload'
- : 'cancel upload'
+ const { resumableUploads, isAllPaused, i18n } = props
+ const title = resumableUploads
+ ? isAllPaused
+ ? i18n('resumeUpload')
+ : i18n('pauseUpload')
+ : i18n('cancelUpload')
return html`
togglePauseResume(props)}>
- ${props.resumableUploads
- ? props.isAllPaused
+ ${resumableUploads
+ ? isAllPaused
? html``
diff --git a/src/plugins/StatusBar/index.js b/src/plugins/StatusBar/index.js
index 911d7fd83..1076888fb 100644
--- a/src/plugins/StatusBar/index.js
+++ b/src/plugins/StatusBar/index.js
@@ -1,4 +1,5 @@
const Plugin = require('../Plugin')
+const Translator = require('../../core/Translator')
const StatusBar = require('./StatusBar')
const { getSpeed } = require('../../core/Utils')
const { getBytesRemaining } = require('../../core/Utils')
@@ -15,15 +16,37 @@ module.exports = class StatusBarUI extends Plugin {
this.title = 'StatusBar'
this.type = 'progressindicator'
+ const defaultLocale = {
+ strings: {
+ uploading: 'Uploading',
+ uploadComplete: 'Upload complete',
+ uploadFailed: 'Upload failed',
+ paused: 'Paused',
+ error: 'Error',
+ retry: 'Retry',
+ retryUpload: 'Retry upload',
+ resumeUpload: 'Resume upload',
+ cancelUpload: 'Cancel upload',
+ pauseUpload: 'Pause upload'
+ }
+ }
+
// set default options
const defaultOptions = {
target: 'body',
- showProgressDetails: false
+ showProgressDetails: false,
+ locale: defaultLocale
}
// merge default options with the ones set by user
this.opts = Object.assign({}, defaultOptions, opts)
+ this.locale = Object.assign({}, defaultLocale, this.opts.locale)
+ this.locale.strings = Object.assign({}, defaultLocale.strings, this.opts.locale.strings)
+
+ this.translator = new Translator({locale: this.locale})
+ this.i18n = this.translator.translate.bind(this.translator)
+
this.pauseAll = this.pauseAll.bind(this)
this.resumeAll = this.resumeAll.bind(this)
this.retryAll = this.retryAll.bind(this)
@@ -134,6 +157,7 @@ module.exports = class StatusBarUI extends Plugin {
isAllPaused: isAllPaused,
isAllErrored: isAllErrored,
isUploadStarted: isUploadStarted,
+ i18n: this.i18n,
pauseAll: this.pauseAll,
resumeAll: this.resumeAll,
retryAll: this.retryAll,
diff --git a/src/scss/_statusbar.scss b/src/scss/_statusbar.scss
index b954b81ed..f892a810a 100644
--- a/src/scss/_statusbar.scss
+++ b/src/scss/_statusbar.scss
@@ -7,7 +7,7 @@
color: $color-white;
background-color: rgba($color-asphalt-gray, 0.7);
box-shadow: 1px 1px 4px 0 rgba($color-asphalt-gray, 0.3);
- overflow: hidden;
+ // overflow-x: hidden;
z-index: $zIndex-2;
transition: height .35s;
}
@@ -56,7 +56,8 @@
padding-left: 15px;
white-space: nowrap;
text-overflow: ellipsis;
- overflow: hidden;
+ // overflow-x: hidden;
+ color: $color-white;
}
.UppyStatusBar-content .UppyIcon {
@@ -79,3 +80,30 @@ button.UppyStatusBar-action {
margin-right: 8px;
cursor: pointer;
}
+
+.UppyStatusBar-button {
+ @include reset-button;
+ cursor: pointer;
+}
+
+.UppyStatusBar-details {
+ line-height: 12px;
+ width: 13px;
+ height: 13px;
+ display: inline-block;
+ vertical-align: middle;
+ color: $color-red;
+ background-color: $color-white;
+ border-radius: 50%;
+ position: relative;
+ top: -1px;
+ left: 3px;
+ font-size: 10px;
+ margin-left: -1px;
+ text-align: center;
+}
+
+.UppyStatusBar-details:after {
+ line-height: 1.3;
+ word-wrap: break-word;
+}