npm package: @scaleflex/widget-preupload-processors
Description: Scaleflex preupload-processors module.
Latest version: 4.8.13

# `@scaleflex/widget-preupload-processors`

[![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 processor which applies some functionalities for the images before uploading process in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).

## Usage

### NPM

```bash
npm install --save @scaleflex/widget-preupload-processors
```
### YARN

```bash
yarn add @scaleflex/widget-preupload-processors
```

then

```js
import PreUploadProcessors from '@scaleflex/widget-preupload-processors'
...
...
...
scaleflexWidget.use(PreUploadProcessors, propertiesObject)
```

### CDN

The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.PreUploadProcessors`

```js
const PreUploadProcessors = window.ScaleflexWidget.PreUploadProcessors
...
...
...
scaleflexWidget.use(PreUploadProcessors, propertiesObject)
```

### Plugin's styles

```js
import '@scaleflex/widget-core/dist/style.css'
import '@scaleflex/widget-preupload-processors/dist/style.css'
```

or if you prefer the minified version

```js
import '@scaleflex/widget-core/dist/style.min.css'
import '@scaleflex/widget-preupload-processors/dist/style.min.css'
```

> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.


## Properties

### `imageProcessorByDefault`

<u>Type:</u> `boolean`

<u>Default:</u> `false`

If `true` the processing of image before upload checkbox would be default checked in the upload settings of uploading panel if there are any images selected, otherwise the checkbox will be default un-checked.

### `isUserAllowedToOptimize`

<u>Type:</u> `boolean`

<u>Default:</u> `true`

If `false` the processing of image before upload will be disabled if there are any images selected, otherwise the processing will be enabled.

### `videoProcessorByDefault`

<u>Type:</u> `boolean`

<u>Default:</u> `false`

If `true` the processing of video before upload checkbox would be default checked in the upload settings of uploading panel if there are any videos selected, otherwise the checkbox will be default un-checked.

### `imageOperations`

<u>Type:</u> `object`

<u>Default:</u> `null`

The operations to be available to the user as options to choose from which to apply on the images before uploading, till now the supported operations:
  - #### `resize` - (*object* - required): Show user inputs for the user to choose the width & height of resizing, with respecting the passed values in `width, height` properties which refers to the max. width & max. height respectively, *show following example*.

example,

```js
{
  resize: {
    width: 2000, // max width the user could reach
    height: 2000 // max height the user could reach
  }
}
```

### `videoTranscodingOptions`

<u>Type:</u> `object`

<u>Default:</u>

```js
{
  resolutions: ['auto', 'hq', 'desktop', 'tablet', 'mobile', 'sample'],
  protocols: ['HLS', 'DASH'],
  defaultResolution: 'auto',
  defaultProtocol: 'HLS'
}
```

The options available for video transcoding shown in the UI controls with its default options.

### `locale`

<u>Type:</u> `object`

<u>Default:</u> default locales inside `lib/defaultLocale.js`.

Customizing some of the translations or the language's strings and replace the default locale.

<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-preupload-processors
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-preupload-processors
[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-preupload-processors?label=Version&style=for-the-badge&logo=npm
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox