Effects Tab for Uploadcare Widget

Effects Tab is a custom tab for Uploadcare Widget that replaces Preview Tab and adds image-editing capabilities to the widget.

Effects Tab provides 9 effects for on-the-fly image editing on upload: crop, rotate, enhance, sharpen, blur, mirror, flip, grayscale and invert. You can customize which effects are allowed and otherwise affect the tab behavior.

Here is a live demo.

How it works

Image operations provided by Effects Tab are based on the capabilities of our CDN API. The tab outputs a CDN link holding your image UUID and image operations applied by a user during the in-tab editing process. Technically, every original image is firstly uploaded to our CDN and then shown to a user in Effects Tab. In case of uploading multiple files, this happens 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 CDN API limitations.


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


You’re free to 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>


That’s how you add Effects Tab to the 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).

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


It’s possible your locale is not available in the tab yet. If that’s the case, contributing your locale might be a good idea. This can be done by forking the main repository followed by adding a new localization file here.

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.