@filerobot/preupload-image-processor

A processor which applies some functionalities for the images before uploading process.

Usage

From NPM

The plugin is on NPM as @filerobot/preupload-image-processor

npm install --save @filerobot/preupload-image-processor

then

import PreUploadImageProcessor from '@filerobot/preupload-image-processor'
...
...
...
filerobot.use(PreUploadImageProcessor, optionsObject)

From CDN

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

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

Plugin's styles

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

or if you prefer the minified version

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

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

Options

target: string (required)

default: null

The selector or filerobot's plugin that would be used for mounting the informer into.

id: string (optional)

default: 'PreUploadImageProcessor'

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

processByDefault: boolean (optional)

default: false

If true the process image before upload checkbox would be default checked in the uploading panel if there are any images selected, otherwise the checkbox won't be default un-checked.

operations: (optional)

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

locale: object (optional)

default:

strings: {
  resizingImages: 'Resizing images....',
  doneResizing: 'Resizing step is done.',
  noBlob: 'Error while resizing, blob is not defined.',
  procecssImgsBeforeUpload: 'Process images before upload',
  operation: 'Operation',
  operationDescription: 'Operation that is being applied automatically before passing the image to uploading stage',
  resize: 'Resize',
  smartCrop: 'Smart Crop',
  faceDetection: 'Face Detection',
  width: 'Width (px)',
  height: 'Height (px)'
}

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