Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-01-23 02:25:07 +00:00
Code Issues Projects Releases Wiki Activity

writing-plugins: update example to use i18nInit (#3122)

Browse source
This commit is contained in:
Antoine du Hamel 2021-08-23 14:03:53 +02:00 • committed by GitHub
parent 0b801ccbad
commit 2a93874e3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

47
website/src/docs/writing-plugins.md
View file

@ -247,19 +247,11 @@ this.defaultLocale = {
}
```
This allows them to be overridden by Locale Packs, or directly when users pass `locale: { strings: youCanOnlyUploadFileTypes: 'Something else completely about %{types}'} }`. For this to work, it's currently also required that you add:
```js
// 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)
// ^-- Only if you're using i18nArray, which allows you to pass in JSX Components as well.
```
This allows them to be overridden by Locale Packs, or directly when users pass `locale: { strings: youCanOnlyUploadFileTypes: 'Something else completely about %{types}'} }`. For this to work, it’s also required that you call `this.i18nInit()` in the plugin constructor.
## Example of a custom plugin
Below is a full example of a [simple plugin](https://github.com/arturi/uppy-plugin-image-compressor) that compresses images before uploading them. You can replace `compressorjs` method with any other work you need to do. This works especially well for async stuff, like calling an external API.
Below is a full example of a [small plugin](https://github.com/arturi/uppy-plugin-image-compressor) that compresses images before uploading them. You can replace `compressorjs` method with any other work you need to do. This works especially well for async stuff, like calling an external API.
<!-- eslint-disable consistent-return -->
```js
@ -269,7 +261,11 @@ import Compressor from 'compressorjs/dist/compressor.esm.js'
class UppyImageCompressor extends UIPlugin {
constructor (uppy, opts) {
super(uppy, opts)
const defaultOptions = {
quality: 0.6,
}
super(uppy, { ...defaultOptions, ...opts })
this.id = this.opts.id || 'ImageCompressor'
this.type = 'modifier'
@ -279,48 +275,27 @@ class UppyImageCompressor extends UIPlugin {
},
}
const defaultOptions = {
quality: 0.6,
}
this.opts = { ...defaultOptions, ...opts }
// we use those internally in `this.compress`, so they
// should not be overriden
delete this.opts.success
delete this.opts.error
this.i18nInit()
this.prepareUpload = this.prepareUpload.bind(this)
this.compress = this.compress.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
}
compress (blob) {
return new Promise((resolve, reject) => new Compressor(blob, ({
...this.opts,
success: (result) => {
success (result) {
return resolve(result)
},
error: (err) => {
error (err) {
return reject(err)
},
})))
}
prepareUpload (fileIDs) {
prepareUpload = (fileIDs) => {
const promises = fileIDs.map((fileID) => {
const file = this.uppy.getFile(fileID)
this.uppy.emit('preprocess-progress', file, {
@ -328,7 +303,7 @@ class UppyImageCompressor extends UIPlugin {
message: this.i18n('compressingImages'),
})
if (file.type.split('/')[0] !== 'image') {
if (!file.type.startsWith('image/')) {
return
}