transloadit · arturi · Jul 30, 2021 · Jul 16, 2021 · Jul 16, 2021 · Jul 16, 2021
diff --git a/examples/custom-provider/client/MyCustomProvider.js b/examples/custom-provider/client/MyCustomProvider.js
@@ -10,7 +10,6 @@ module.exports = class MyCustomProvider extends UIPlugin {
     this.id = this.opts.id || 'MyCustomProvider'
     Provider.initPlugin(this, opts)
 
-    this.title = 'MyUnsplash'
     this.icon = () => (
       <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
         <path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z" fill="#000000" fillRule="nonzero" />
@@ -24,6 +23,14 @@ module.exports = class MyCustomProvider extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameMyUnsplash: 'MyUnsplash',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('MyUnsplash')
+
     this.files = []
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/@uppy/aws-s3/src/index.js b/packages/@uppy/aws-s3/src/index.js
@@ -90,24 +90,11 @@ module.exports = class AwsS3 extends BasePlugin {
 
     this.opts = { ...defaultOptions, ...opts }
 
-    this.i18nInit()
-
     this.client = new RequestClient(uppy, opts)
     this.handleUpload = this.handleUpload.bind(this)
     this.requests = new RateLimitedQueue(this.opts.limit)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   getUploadParameters (file) {
     if (!this.opts.companionUrl) {
       throw new Error('Expected a `companionUrl` option containing a Companion address.')

diff --git a/packages/@uppy/box/src/index.js b/packages/@uppy/box/src/index.js
@@ -32,6 +32,14 @@ module.exports = class Box extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameBox: 'Box',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameBox')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

diff --git a/packages/@uppy/core/src/BasePlugin.js b/packages/@uppy/core/src/BasePlugin.js
@@ -6,6 +6,9 @@
  *
  * See `Plugin` for the extended version with Preact rendering for interfaces.
  */
+
+const Translator = require('@uppy/utils/lib/Translator')
+
 module.exports = class BasePlugin {
   constructor (uppy, opts = {}) {
     this.uppy = uppy
@@ -34,6 +37,14 @@ module.exports = class BasePlugin {
   setOptions (newOpts) {
     this.opts = { ...this.opts, ...newOpts }
     this.setPluginState() // so that UI re-renders with new options
+    this.i18nInit()
+  }
+
+  i18nInit () {
+    const translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
+    this.i18n = translator.translate.bind(translator)
+    this.i18nArray = translator.translateArray.bind(translator)
+    this.setPluginState() // so that UI re-renders and we see the updated locale
   }
 
   /**

diff --git a/packages/@uppy/core/src/index.js b/packages/@uppy/core/src/index.js
@@ -39,6 +39,8 @@ class Uppy {
 
   #emitter = ee()
 
+  #translator
+
   /**
    * Instantiate Uppy
    *
@@ -258,10 +260,16 @@ class Uppy {
   }
 
   i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.opts.locale])
-    this.locale = this.translator.locale
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
+    this.#translator = new Translator([this.defaultLocale, this.opts.locale])
+    this.locale = this.#translator.locale
+  }
+
+  i18n (...args) {
+    return this.#translator.translate(...args)
+  }
+
+  i18nArray (...args) {
+    return this.#translator.translateArray(...args)
   }
 
   setOptions (newOpts) {

diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js
@@ -165,18 +165,6 @@ module.exports = class Dashboard extends UIPlugin {
     this.removeDragOverClassTimeout = null
   }
 
-  setOptions = (newOpts) => {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit = () => {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   removeTarget = (plugin) => {
     const pluginState = this.getPluginState()
     // filter out the one we want to remove

diff --git a/packages/@uppy/drag-drop/src/index.js b/packages/@uppy/drag-drop/src/index.js
@@ -38,12 +38,12 @@ module.exports = class DragDrop extends UIPlugin {
     // Merge default options with the ones set by user
     this.opts = { ...defaultOpts, ...opts }
 
+    this.i18nInit()
+
     // Check for browser dragDrop support
     this.isDragDropSupported = isDragDropSupported()
     this.removeDragOverClassTimeout = null
 
-    this.i18nInit()
-
     // Bind `this` to class methods
     this.onInputChange = this.onInputChange.bind(this)
     this.handleDragOver = this.handleDragOver.bind(this)
@@ -53,18 +53,6 @@ module.exports = class DragDrop extends UIPlugin {
     this.render = this.render.bind(this)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   addFiles (files) {
     const descriptors = files.map((file) => ({
       source: this.id,

diff --git a/packages/@uppy/dropbox/src/index.js b/packages/@uppy/dropbox/src/index.js
@@ -29,6 +29,14 @@ module.exports = class Dropbox extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameDropbox: 'Dropbox',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameDropbox')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

diff --git a/packages/@uppy/facebook/src/index.js b/packages/@uppy/facebook/src/index.js
@@ -29,6 +29,14 @@ module.exports = class Facebook extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameFacebook: 'Facebook',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameFacebook')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

diff --git a/packages/@uppy/file-input/src/index.js b/packages/@uppy/file-input/src/index.js
@@ -38,18 +38,6 @@ module.exports = class FileInput extends UIPlugin {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   addFiles (files) {
     const descriptors = files.map((file) => ({
       source: this.id,

diff --git a/packages/@uppy/google-drive/src/index.js b/packages/@uppy/google-drive/src/index.js
@@ -30,6 +30,14 @@ module.exports = class GoogleDrive extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameGoogleDrive: 'Google Drive',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameGoogleDrive')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

diff --git a/packages/@uppy/image-editor/src/index.js b/packages/@uppy/image-editor/src/index.js
@@ -65,18 +65,6 @@ module.exports = class ImageEditor extends UIPlugin {
     this.i18nInit()
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    // this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   canEditFile (file) {
     if (!file.type || file.isRemote) {
       return false

diff --git a/packages/@uppy/instagram/src/index.js b/packages/@uppy/instagram/src/index.js
@@ -10,7 +10,6 @@ module.exports = class Instagram extends UIPlugin {
     super(uppy, opts)
     this.id = this.opts.id || 'Instagram'
     Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'Instagram'
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fillRule="evenodd">
@@ -20,6 +19,14 @@ module.exports = class Instagram extends UIPlugin {
       </svg>
     )
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameInstagram: 'Instagram',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameInstagram')
+
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

diff --git a/packages/@uppy/locales/src/en_US.js b/packages/@uppy/locales/src/en_US.js
@@ -89,6 +89,14 @@ en_US.strings = {
   pause: 'Pause',
   paused: 'Paused',
   pauseUpload: 'Pause upload',
+  pluginNameBox: 'Box',
+  pluginNameCamera: 'Camera',
+  pluginNameDropbox: 'Dropbox',
+  pluginNameFacebook: 'Facebook',
+  pluginNameGoogleDrive: 'Google Drive',
+  pluginNameInstagram: 'Instagram',
+  pluginNameOneDrive: 'OneDrive',
+  pluginNameZoom: 'Zoom',
   poweredBy: 'Powered by %{uppy}',
   processingXFiles: {
     '0': 'Processing %{smart_count} file',

diff --git a/packages/@uppy/onedrive/src/index.js b/packages/@uppy/onedrive/src/index.js
@@ -31,6 +31,14 @@ module.exports = class OneDrive extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameOneDrive: 'OneDrive',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameOneDrive')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

diff --git a/packages/@uppy/screen-capture/src/index.js b/packages/@uppy/screen-capture/src/index.js
@@ -65,9 +65,7 @@ module.exports = class ScreenCapture extends UIPlugin {
     this.opts = { ...defaultOptions, ...opts }
 
     // i18n
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
+    this.i18nInit()
 
     // uppy plugin class related
     this.install = this.install.bind(this)

diff --git a/packages/@uppy/status-bar/src/index.js b/packages/@uppy/status-bar/src/index.js
@@ -73,17 +73,6 @@ module.exports = class StatusBar extends UIPlugin {
     this.install = this.install.bind(this)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   getTotalSpeed (files) {
     let totalSpeed = 0
     files.forEach((file) => {

diff --git a/packages/@uppy/thumbnail-generator/src/index.js b/packages/@uppy/thumbnail-generator/src/index.js
@@ -40,19 +40,6 @@ module.exports = class ThumbnailGenerator extends UIPlugin {
     if (this.opts.lazy && this.opts.waitForThumbnailsBeforeUpload) {
       throw new Error('ThumbnailGenerator: The `lazy` and `waitForThumbnailsBeforeUpload` options are mutually exclusive. Please ensure at most one of them is set to `true`.')
     }
-
-    this.i18nInit()
-  }
-
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
   }
 
   /**

diff --git a/packages/@uppy/transloadit/src/index.js b/packages/@uppy/transloadit/src/index.js
@@ -82,18 +82,6 @@ module.exports = class Transloadit extends BasePlugin {
     this.completedFiles = Object.create(null)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   #getClientVersion () {
     const list = [
       `uppy-core:${this.uppy.constructor.VERSION}`,