npm package: @scaleflex/widget-thumbnail-generator
Description: Scaleflex plugin that generates small previews of images to show on your upload UI.
Latest version: 4.8.13

# `@scaleflex/widget-thumbnail-generator`

[![Plugins][plugins-image]](#plugins)
[![Website][filerobot-image]][sfx-url]
[![Version][filerobot-version]][version-url]
[![Scaleflex team][made-by-image]][sfx-url]
[![License][license-image]][license-url]
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]


<div align='center'>
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
</div>

A helper plugin used in generating thumbnails for files to be shown in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).

## Usage

### NPM

```bash
npm install --save @scaleflex/widget-thumbnail-generator
```
### YArn

```bash
yarn add @scaleflex/widget-thumbnail-generator
```

then

```js
import ThumbnailGenerator from '@scaleflex/widget-thumbnail-generator'
...
...
...
scaleflexWidget.use(ThumbnailGenerator, propertiesObject)
```

### CDN

The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ThumbnailGenerator`

```js
const ThumbnailGenerator = window.ScaleflexWidget.ThumbnailGenerator
...
...
...
scaleflexWidget.use(ThumbnailGenerator, propertiesObject)
```

> If you are using [`@scaleflex/widget-explorer`](../@scaleflex/widget-explorer/#scaleflexwidget-explorer) pluign you don't need to manually import this plugin as it is being imported automatically there and the default id `Explorer:thumbnail-generator` Unless the Explorer id is changed.

## Properties

### `id`

<u>Type:</u> `object`.

<u>Default:</u> `'ThumbnailGenerator'`

An unique identifier for the plugin to be identified between the other plugins through it.

### `thumbnailWidth`

<u>Type:</u> `number`.

<u>Default:</u> `200`

The width of the generated thumbnail to be, if it is not provided the default width would be used.

### `thumbnailHeight`

<u>Type:</u> `number`.

<u>Default:</u> `170`

The height of the generated thumbnail to be, if it is not provided the default height would be used.

### `waitForThumbnailsBeforeUpload`

<u>Type:</u> `boolean`.

<u>Default:</u> `false`

Delays the start of uploading process till the thumbnails for files selected to be uploaded are generated.

### `lazy`

<u>Type:</u> `boolean`.

<u>Default:</u> `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

```js
scaleflexWidget.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

```js
scaleflexWidget.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

```js
scaleflexWidget.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.

<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-thumbnail-generator
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-thumbnail-generator
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js

[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-thumbnail-generator?label=Version&style=for-the-badge&logo=npm
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox