@filerobot/thumbnail-generator

@filerobot/thumbnail-generator

A helper plugin used in generating thumbnails for files to be shown in Filerobot widget.

Usage

From NPM

The plugin is on NPM as @filerobot/thumbnail-generator

npm install --save @filerobot/thumbnail-generator

then

import ThumbnailGenerator from '@filerobot/thumbnail-generator'
...
...
...
filerobot.use(ThumbnailGenerator, optionsObject)

From CDN

The plugin from CDN is found inside Filerobot global object Filerobot.ThumbnailGenerator

const ThumbnailGenerator = window.Filerobot.ThumbnailGenerator
...
...
...
filerobot.use(ThumbnailGenerator, optionsObject)

If you are using @filerobot/file-explorer pluign you don't need to manually import this plugin as it is being imported automatically there and the default id FileExplorer:thumbnail-generator Unless the FileExplorer id is changed.

Options

id: string (optional)

default: 'ThumbnailGenerator'

An unique identifier for the plugin to be indentified between the other plugins through it.

thumbnailWidth: number | null (optional)

default: null

The width of the generated thumbnail to be, if it is not provided the proper width would be extracted from the image for which thumbnail will be generated.

thumbnailHeight: number | null (optional)

default: null

The height of the generated thumbnail to be, if it is not provided the proper height would be extracted from the image for which thumbnail will be generated.

waitForThumbnailsBeforeUpload: boolean (optional)

default: false

Delays the start of uploading process till the thumbnails for files selected to be uploaded are generated.

lazy: boolean (optional)

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:

Emitted

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)
})

Subscribed

thumbnail:request (works only with lazy: true)

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.