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

# React jQuery File Uploader

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

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

Receive files from your users with a clean, lightweight and easy-to-integrate
widget. This React component helps you integrate Uploadcare Widget into your
React app natively; props management and lazy loading are bundled.

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

See a lazy-loading [React component](https://github.com/uploadcare/react-widget) example.

#### [React jQuery File Uploader example](https://codesandbox.io/s/uploadcarereact-widget-7xpqp)

View in CodeSandbox

## 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:

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

This way, you'll get a ready-to-use *component* to include it in the layout.

Open your `/src/App.js` and add the following line along with other imports to
load the newly installed component:

This import is for the deprecated jQuery-based React Uploader. For new integrations, use [React File Uploader](/docs/integrations/react-file-uploader/) instead.

## Usage example

To use the uploading widget component, add this code to your `/src/App.js` or
another template of your choice:

This usage example is for the deprecated jQuery-based React Uploader. For new integrations, use [React File Uploader](/docs/integrations/react-file-uploader/) instead.

Just replace `YOUR_PUBLIC_KEY` with your [Public API Key](/docs/start/settings/#keys-public)
in the code above.

Finally, open your app in a browser, or run it again via `npm start` and that’s
it.

## Settings and Events \[#advanced-settings]

jQuery File Uploader is [highly customizable](/docs/uploads/file-uploader-options/). The component
uses the **camelCase** notation of the options names; these name versions are
called `Object key` in Options Summary.

For example, this is how you allow uploading files only from local storage and
URLs via the `tabs` attribute and enable the preview step via the `previewStep`
attribute:

Regarding the events, you can use `onChange` and `onFileSelect`.
It's well described in our [jQuery File Uploader API reference](/docs/file-uploader-api/widget/#widget-on-change)
and in the README of the [component’s GitHub repo](https://github.com/uploadcare/react-widget).
A couple of basic examples:

These examples are for the deprecated jQuery-based React Uploader. For new integrations, use [React File Uploader](/docs/integrations/react-file-uploader/) instead.

## Full documentation

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

## Related guides

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