Effects Tab for Uploadcare Widget

Better images provide higher click rates and conversions. If you are working with user-generated images, you would want users to perfect those before they get to your site or app.

Effects Tab gives you image-editing capabilities right in the widget. It’s a custom tab for Uploadcare Widget.

There are nine on-the-fly effects you can apply on upload: crop, rotate, enhance, sharpen, blur, mirror, flip, grayscale, and invert.

You can configure which effects are allowed and change the tab behavior in many ways.

Feel free to get your hands on Effects Tab before reading further.

How it works

Image operations provided by Effects Tab are based on the capabilities of our image processing. The tab outputs a CDN URL holding image UUID and image operations applied by a user while editing. Technically, every original image is firstly uploaded to your project. So, it first appears on our CDN and is then shown to a user in Effects Tab. Multiple files are uploaded asynchronously.

For example, if a user chose to apply grayscale and clicked rotate once, this is how the output value looks like:


You will always have the preview operation in Effects Tab output URL due to our image processing limitations.


Since Effects Tab is a custom tab for Uploadcare Widget, make sure to start with installing the widget.


Choose from the install methods listed below.


Get Effects Tab,

npm i uploadcare-widget-tab-effects --save

And then import it in your module,

import uploadcareTabEffects from 'uploadcare-widget-tab-effects'


You can either install this minification-enabled Effects Tab version,

<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.min.js" charset="utf-8"></script>

Or a bundled version without minification,

<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js" charset="utf-8"></script>


To start using Effects Tab, just add it to your widget:

uploadcare.registerTab('preview', uploadcareTabEffects)


This section describes different ways to set which effects are allowed in the Effects Tab.

Global variables

  UPLOADCARE_EFFECTS = 'blur,sharp,grayscale'


  UPLOADCARE_EFFECTS = ['blur', 'sharp', 'grayscale']

Local attributes

<input type="hidden" role="uploadcare-uploader" name="content"

Settings object

  effects: 'blur,sharp,grayscale',


  effects: ['blur', 'sharp', 'grayscale'],


Effects string|array

Local: data-effects
Object key: effects

Default value: crop,rotate,enhance,sharp,grayscale.

This allows you to configure the set of enabled effects. It also controls the order of effects in the tab: however, crop is always the first in the set.

effects can either be a string holding one or more comma-separated effects or an array of strings, JS only. You can also enable all effects by setting the option to all.

Available effects:

  • crop, crops images freely or using set aspect ratios
  • rotate, rotates images
  • mirror, provides image-mirroring capabilities
  • flip, allows flipping images
  • blur, filters images via Gaussian Blur
  • sharp, allows adjusting image sharpness
  • enhance, makes images look better via auto levels, auto contrast, and saturation sharpening
  • grayscale, desaturates images
  • invert, inverts image colors


You can choose one of the existing tab locales or contribute a new one. This can be done by forking the main repository followed by adding a new localization file to the list.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.