@filerobot/thumbnail-generator
v3.74.1
Published
Filerobot plugin that generates small previews of images to show on your upload UI.
Downloads
19,518
Keywords
Readme
@filerobot/thumbnail-generator
A helper plugin used in generating thumbnails for files to be shown in Filerobot Media Asset Widget.
Usage
NPM
npm install --save @filerobot/thumbnail-generator
YArn
yarn add @filerobot/thumbnail-generator
then
import ThumbnailGenerator from '@filerobot/thumbnail-generator'
...
...
...
filerobot.use(ThumbnailGenerator, propertiesObject)
CDN
The plugin from CDN is found inside Filerobot
global object Filerobot.ThumbnailGenerator
const ThumbnailGenerator = window.Filerobot.ThumbnailGenerator
...
...
...
filerobot.use(ThumbnailGenerator, propertiesObject)
If you are using
@filerobot/explorer
pluign you don't need to manually import this plugin as it is being imported automatically there and the default idExplorer:thumbnail-generator
Unless the Explorer id is changed.
Properties
id
Type: object
.
Default: 'ThumbnailGenerator'
An unique identifier for the plugin to be identified between the other plugins through it.
thumbnailWidth
Type: number
.
Default: 200
The width of the generated thumbnail to be, if it is not provided the default width would be used.
thumbnailHeight
Type: number
.
Default: 170
The height of the generated thumbnail to be, if it is not provided the default height would be used.
waitForThumbnailsBeforeUpload
Type: boolean
.
Default: false
Delays the start of uploading process till the thumbnails for files selected to be uploaded are generated.
lazy
Type: boolean
.
Default: false
Starts the thumbnail generating process manually through the below events not automatically.
Events
The 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:
Emitters
thumbnail:all-generated
Emitted when all the thumbnails are generated.
params
: No params returned.
example
filerobot.on('thumbnail:all-generated', () => {
console.log('all thumbnails generated')
})
thumbnail:generated
Emitted when a file's thumbnail is generated.
params
:
file
: The file object whom thumbnail is generated.preview
: The generated thumbnail image local url.
example
filerobot.on('thumbnail:generated', (file, previewUrl) => {
console.log('[Thumbnail-generator]: File's thumbnail is generated', file)
const img = document.createElement('img')
img.src = previewUrl
img.width = 111
document.body.appendChild(img)
})
thumbnail:error
Emitted when a file's thumbnail generating faced an error.
params
:
file
: The file object whom thumbnail is generated.error
: The error faced while generated.
example
filerobot.on('thumbnail:generated', (file, error) => {
console.log('[Thumbnail-generator]: File's thumbnail had an error while generating', file)
console.log('The error: ', error)
})
Subscribers
thumbnail:request
handler
: (fileObject) => ...
Subscribes the handler of generating thumbnail for a file, fired when the event is emitted.
thumbnail:update
handler
: (fileObject) => ...
Subscribes the handler of updating a generated thumbnail for a file, fired when the event is emitted.