> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://uploadcare.com/docs/_mcp/server.

# Image editor for jQuery File Uploader

> Editing images right in a browser is the closest path for your app to receive better images.

> **Note**
>
> **Note:** This page covers the legacy jQuery-based Effects Tab, deprecated as of September 2025. For current image editing, use [Cloud Image Editor](/docs/file-uploader/image-editor/) instead.

Editing images right in a browser is the closest path for your app to receive
better images. And those, in turn, provide higher engagement rates and
conversions. The quality of visuals becomes an even greater concern when you
want to perfect images sent by your users before they get to your site or app.

Uploadcare features a [custom tab](/docs/uploads/file-uploader/#custom-tabs) for the
[jQuery File Uploader](/docs/uploads/file-uploader/) that allows enhancing and editing
images in any browser, mobile included. The tab is called
[Effects Tab](https://github.com/uploadcare/uploadcare-widget-tab-effects).

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

You can configure which effects are enabled and change the tab behavior in other
ways.

## How it works \[#info]

Image operations available for applying in the uploading widget dialog are based on our
[image processing operations](/docs/transformations/image/#image-transformations-list). Effects Tab outputs a CDN URL
holding image \[UUIDs and operations applied by a user while editing
in form of URL directives.

Technically, every image first gets to your Uploadcare
[project](/docs/start/settings/). Then we show an image preview in the uploading widget
dialog via a CDN URL provided on file upload. When a user applies image
processing operations, we inject the corresponding URL directives. Once the
editing is complete, Effect Tab outputs the new CDN URL which includes all the
applied operations.

For example, if a user chose to apply `grayscale` and clicked `rotate` once,
here is what we will get in the output:

```cdn
https://:subdomain.ucarecd.net/:UUID/-/preview/-/grayscale/-/rotate/270/
```

`:subdomain` is your project's subdomain. Find it in [Delivery](https://app.uploadcare.com/projects/-/settings/#delivery).

Note the `preview` operation will appear in the output URL by default due to
the image processing operation [limitations](/docs/transformations/image/#limits).

## Requirements

In-browser image editing is carried out via a
[custom uploading widget tab](/docs/uploads/file-uploader/#custom-tabs) called [Effects Tab](https://github.com/uploadcare/uploadcare-widget-tab-effects).

The only requirement is [integrating the uploading widget](/docs/uploads/file-uploader/#install) before
using Effects Tab.

## Install

Choose from the install methods listed below.

### NPM

Get Effects Tab:

This package is deprecated. For current image editing, use [Cloud Image Editor](/docs/file-uploader/image-editor/) instead.

Import the tab it in your module:

This import is for the deprecated jQuery-based Effects Tab. For current image editing, use [Cloud Image Editor](/docs/file-uploader/image-editor/) instead.

### CDN

You can either install the minified Effects Tab version:

Or go with a bundled version without minification:

These CDN bundles are for the deprecated jQuery-based Effects Tab. For current image editing, use [Cloud Image Editor](/docs/file-uploader/image-editor/) instead.

#### Usage

Start using Effects Tab by adding it to your uploading widget:

This registers the deprecated jQuery-based Effects Tab. For current image editing, use [Cloud Image Editor](/docs/file-uploader/image-editor/) instead.

## Configuration \[#config]

There are multiple ways to configure the set of effects enabled in Effects Tab.

### Global Variables

You can either go with a string holding coma-separated effect names:

or use another approach:

These global-variable configuration examples are for the deprecated jQuery-based Effects Tab. For current image editing, use [Cloud Image Editor](/docs/file-uploader/image-editor/) instead.

### Local Attributes

The set of enabled effects for a specific uploading widget instance can be controlled
via the `data-effects` attribute.

This attribute is for the deprecated jQuery-based Effects Tab. For current image editing, use [Cloud Image Editor](/docs/file-uploader/image-editor/) instead.

### Settings Object

Following the uploading widget concept, the allowed effects can be provided as the
`settings` [object](/docs/uploads/file-uploader/#settings-object).

or

These settings-object examples are for the deprecated jQuery-based Effects Tab. For current image editing, use [Cloud Image Editor](/docs/file-uploader/image-editor/) instead.

## Options

### Effects `string|array`

Global: `UPLOADCARE_EFFECTS` \

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` will always placed 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

## Localization \[#locale]

You can choose one of the existing [tab locales](https://github.com/uploadcare/uploadcare-widget-tab-effects/tree/master/src/locale) or
contribute a new one. This can be done by forking the
[main repository](https://github.com/uploadcare/uploadcare-widget-tab-effects) followed by adding a new localization file
to the [list](https://github.com/uploadcare/uploadcare-widget-tab-effects/tree/master/src/locale).