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

# Angular 2+ jQuery File Uploader

> Integrate jQuery File Uploader into Your Angular 2+ App to Accept Files From Users in a Fast and Reliable Way.

> **Note**
>
> **Note:** This article covers the legacy jQuery-based uploader wrapper, deprecated as of September 2025. For current framework examples and setup paths, use [Angular File Uploader](/docs/integrations/angular-file-uploader/) instead.

Receive files from your users with a clean, lightweight and easy-to-integrate
widget. This Angular component helps you integrate
[jQuery File Uploader](/docs/uploads/file-uploader/) into your Angular app natively.

[GitHub →](https://github.com/uploadcare/ngx-uploadcare-widget)

## Features

* Upload files from a local disk, camera, and cloud source (up to 5 TB)
* Multipart uploading for large files
* Bulk file uploading
* In-browser image editing
* Uploading network to speed uploading jobs (like CDN)

## Integration

Run this command in your project’s directory.

For Angular v12+ — install `ngx-uploadcare-widget v3.x`:

For Angular from v9 to v11 — install ngx-uploadcare-widget v2.x:

For Angular v8 and lower — install ngx-uploadcare-widget v1.x:

This package is deprecated. For new integrations, use [Angular File Uploader](/docs/integrations/angular-file-uploader/) instead.

Once you’re done with the installation, import the uploading widget into your project.
For new Angular projects, you can open the file `/src/app/app.module.ts` in a
text editor and insert this line:

After that, include the module in the `imports` section of your project’s
module:

This module setup is for the deprecated jQuery-based Angular wrapper. For new integrations, use [Angular File Uploader](/docs/integrations/angular-file-uploader/) instead.

If you work with an existing project, then you’ll need to do the same in
the part of your app where you want to use the integration. If you are unsure,
stick with `/src/app/app.module.ts`.

That’s how `app.module.ts` should look like after your changes:

\


## Test

You are now ready to add the uploading widget to some page and try using it.

Insert the following lines in one of the `something.component.html` files of
your project (or in `/src/app/app.component.html` for new projects):

If you want to to go with the customized the uploading widget look use this element:

These elements are part of the deprecated jQuery-based Angular wrapper. For new integrations, use [Angular File Uploader](/docs/integrations/angular-file-uploader/) instead.

Don’t forget to replace `YOUR_PUBLIC_KEY` with an actual
[Public API Key](/docs/start/settings/#keys-public) from your Uploadcare project's
[Dashboard](https://app.uploadcare.com/).

Save the file and let the Angular serve itself:

```bash
ng serve --open
```

The uploading widget will load like this:

\
\


## Settings

The uploading widget integration for Angular 2+ is highly customizable. You can use all
the attributes listed in the [ngx readme](https://github.com/uploadcare/ngx-uploadcare-widget/blob/master/README.md).
Learn more about [jQuery File Uploader options](/docs/uploads/file-uploader-options/).

For example, this is how you allow uploading files only from local storage and
URLs via the `data-tabs` attribute:

This element is part of the deprecated jQuery-based Angular wrapper. For new integrations, use [Angular File Uploader](/docs/integrations/angular-file-uploader/) instead.

## Full documentation

Read the full documentation on [GitHub](https://github.com/uploadcare/ngx-uploadcare-widget).

## Related guides

* [jQuery File Uploader](/docs/uploads/file-uploader/) docs
* [jQuery File Uploader API reference](/docs/file-uploader-api/widget/)