# jQuery SDK

[transloadit/jquery-sdk](https://github.com/transloadit/jquery-sdk)

Until [Uppy](https://uppy.io) reached 1.0, our [jQuery SDK](/docs/sdks/jquery-sdk.md) was the recommended way to integrate Transloadit with web browsers. This is no longer the case and we’d now like everybody to use Uppy instead.

## Install

###### Note

You may also be interested in checking out [Uppy](/docs/sdks/uppy.md), Transloadit's next-gen file uploader for the web.

Simply include the JavaScript asset in your HTML page like so. jQuery >= 1.9 is also required.

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_CtwzFbHWtqiCy9uvWb9fE7WvfP9N)

```html
<script
  type="text/javascript"
  src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
></script>
<script src="//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js"></script>

```

## Usage

The Transloadit jQuery plugin allows you to

* show file upload progress,
* get uploaded results directly without further API queries, and
* wait for upload processing to complete before redirecting to the result page or calling a callback function.

Assuming a form with the ID `"upload-form"` (from the[minimal integration](/docs.md#minimal-integration)), the jQuery plugin can be used like this:

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_CtwzFbHWtqiCy9uvWb9fE7WvfP9N)

```html
<script src="//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js"></script>
<script type="text/javascript">
// We call .transloadit() after the DOM is initialized:
$(function() {
  $('#upload-form').transloadit({
    wait  : true,
    fields: true,

    triggerUploadOnFileSelection: true,

    params : {
      auth  : { key : 'YOUR_TRANSLOADIT_KEY' },
      steps : {
        resize_to_75: {
          robot  : '/image/resize',
          use    : ':original',
          width  : 75,
          height : 75
        },
        // more Steps here
      }
    }
  });
});
</script>

```

By default, this will display an overlay with a progress bar.

###### Important

Your file input fields must each have a proper `name` attribute for our jQuery SDK to work properly.

## Example

An example use of this plugin can be found in the[examples](https://github.com/transloadit/jquery-sdk/tree/HEAD/examples) directory.

To run it, simply replace `YOUR_TRANSLOADIT_KEY` (on the HTML file) with your actual Transloadit key and load the html file on your browser.

## Documentation

See [GitHub](https://github.com/transloadit/jquery-sdk) for the full documentation.