Filerobot preupload-image-processor module.
npm install @filerobot/preupload-image-processor@filerobot/preupload-image-processor@filerobot/preupload-image-processor
npm install --save @filerobot/preupload-image-processor
`
then
`
import PreUploadImageProcessor from '@filerobot/preupload-image-processor'
...
...
...
filerobot.use(PreUploadImageProcessor, optionsObject)
`
$3
The plugin from CDN is found inside Filerobot global object Filerobot.PreUploadImageProcessor
`
const PreUploadImageProcessor = window.Filerobot.PreUploadImageProcessor
...
...
...
filerobot.use(PreUploadImageProcessor, optionsObject)
`
$3
`
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)'
}
``