jQuery Upload Widget

To install the jQuery Upload Widget, use this script tag:

<script src="https://js.upload.io/jquery-uploader/v3"></script>

Or install via NPM:

npm install @upload-io/jquery-uploader

Or install via YARN:

yarn add @upload-io/jquery-uploader

Option 1: Create an Upload Button

1<html>
2  <head>
3    <!-- Install jQuery & jQuery Uploader Plugin -->
4    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
5    <script src="https://js.upload.io/jquery-uploader/v3"></script>
6
7    <!-- Show an upload modal on button click -->
8    <script>
9      // Call once at the start of your app.
10      $.uploader.init({
11        apiKey: "free" // Replace "free" with your API key.
12      });
13
14      $(() => {
15        $(".upload-btn").uploader({
16          multi: true,
17          onComplete: files => {
18            if (files.length === 0) {
19              alert('No files selected.')
20            } else {
21              alert(files.map(f => f.fileUrl).join("\n"));
22            }
23          }
24        });
25      });
26    </script>
27  </head>
28  <body>
29    <button class="upload-btn">Upload file...</button>
30  </body>
31</html>

Options: Configuration + {onComplete: (files: UploadWidgetResult[]) => void}

Callback Parameter: Result

Live preview:

Option 2: Create a Dropzone

1<html>
2  <head>
3    <!-- Install jQuery & jQuery Uploader Plugin -->
4    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
5    <script src="https://js.upload.io/jquery-uploader/v3"></script>
6
7    <!-- Show an upload dropzone on page load -->
8    <script>
9      // Call once at the start of your app.
10      $.uploader.init({
11        apiKey: "free" // Replace "free" with your API key.
12      });
13
14      $(() => {
15        $(".upload-dropzone").uploader({
16          multi: true,
17          dropzone: {
18            width: "600px",
19            height: "375px"
20          },
21          onUpdate: files => {
22            if (files.length === 0) {
23              alert('No files selected.')
24            } else {
25              alert(files.map(f => f.fileUrl).join("\n"));
26            }
27          }
28        });
29      });
30    </script>
31  </head>
32  <body>
33    <div class="upload-dropzone"></div>
34  </body>
35</html>

Options: Configuration + {dropzone: {width: string, height: string}}

Callback Parameter: Result

Live preview:

Was this section helpful? Yes No

You are using an outdated browser.

This website requires a modern web browser -- the latest versions of these browsers are supported:

File Uploading

File Processing APIs

Data Types

More Resources

jQuery Upload Widget

Option 1: Create an Upload Button

Option 2: Create a Dropzone

You are using an outdated browser.