@filerobot/preupload-processors

A processor which applies some functionalities for the images before uploading process in Filerobot Media Asset Widget.

Usage

NPM

npm install --save @filerobot/preupload-processors

YARN

yarn add @filerobot/preupload-processors

then

import PreUploadProcessors from '@filerobot/preupload-processors'
...
...
...
filerobot.use(PreUploadProcessors, propertiesObject)

CDN

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

const PreUploadProcessors = window.Filerobot.PreUploadProcessors
...
...
...
filerobot.use(PreUploadProcessors, propertiesObject)

Plugin's styles

import '@filerobot/core/dist/style.css'
import '@filerobot/preupload-processors/dist/style.css'

or if you prefer the minified version

import '@filerobot/core/dist/style.min.css'
import '@filerobot/preupload-processors/dist/style.min.css'

The plugin's css file should be imported after the Core's css file for having the styles shown correctly.

Properties

imageProcessorByDefault

Type: boolean

Default: 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

Type: boolean

Default: 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

Type: boolean

Default: 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

Type: object

Default: 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,

{
  resize: {
    width: 2000, // max width the user could reach
    height: 2000 // max height the user could reach
  }
}

assetsTransformations

Type: object

Default:

{
  isActive: true,
  isModifiable: true,
  presets: []
}

The transformations available to the user as options to choose from which to transform the images before uploading, they consist of the follows:

• isActive - (boolean - required): indicates whether transformations are active and will be applied pre upload or not.

• isModifiable - (boolean - optional): indicates whether the end user can activate or update the transformations or not.

• presets - (array - required): the transformations array to be applied on assets pre upload.

example,

{
  assetsTransformations: {
    isActive: true,
    isModifiable: true,
    presets: [
      {
        autogenerate: true,
        name: 'preset1',
        params: {
          w: '200',
          h: '200'
        }
      },
      {
        autogenerate: true,
        name: 'preset2',
        params: {
          w: '300',
          h: '400'
        }
      },
    ]
  }
}

videoTranscodingOptions

Type: object

Default:

{
  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

Type: object

Default: default locales inside lib/defaultLocale.js.

Customizing some of the translations or the language's strings and replace the default locale.