Uploadcare jQuery File Uploader

We’ve built the next version of the File Uploader.

Uploadcare jQuery File Uploader is responsive and mobile-ready HTML5 widget that allows users to select and upload multiple files from various sources. Also, it includes an in-browser image editor. You can customize the appearance and functionality to match your website and task.

jQuery File Uploader is supplied as a JavaScript library. It overrides an <input type="file"> control on an HTML page with a button that opens up the uploading widget dialog. Like this:

Features

jQuery File Uploader helps you perform the following tasks:

  • Uploading
    • Add a file uploading capability to your website or app.
    • Upload files of any type and up to 5 TB in size.
    • Get files from various upload sources, including local storage, camera, social media, and cloud storage services.
    • Upload multiple files in one go.
    • Track upload jobs with an individual progress bar for each file.
    • Speed up the uploading with the uploading network (it works like CDN).
  • Image Handling
    • Show image previews.
    • Implement custom image crop options.
    • Edit, enhance, and apply photo filters to images in any browser.
  • Validation
  • Security
    • Make your uploading system compatible with SOC 2, HIPAA, and more.
    • Prevent remote code execution through File Uploading.
    • Prevent code execution in uploaded files like SVG, html and xml.
  • Reliability
    • All your uploads go to the storage covered by SLA with a 99.9% uptime.

Supported browsers

jQuery File Uploader works in all modern browsers, desktop and mobile. Here’s a list of supported browsers:

DesktopMobile
Chrome: 37+Android Browser: 4.4+
Firefox: 32+Opera Mobile: 8+
Safari: 9+iOS Safari: 9+
Edge: 12+IE Mobile: 11+
IE: 10+Opera Mini: Last

jQuery File Uploader will most probably run in older browser versions as well. More on browser version support.

Installation

Select either option to install jQuery File Uploader:

Refer to no-code integrations to use the uploading widget with your website platform like Shopify, etc.

Before proceeding with your install, check out the dependencies and jQuery File Uploader bundles below.

Dependencies

jQuery File Uploader doesn’t have any external dependencies except for jQuery. Generally, the uploading widget comes in two versions: with and without embedded jQuery library.

For example, you can use jQuery commands on the page if you included a bundle with jQuery:

1var $ = uploadcare.jQuery;
2$('body').append('It works!');

Bundles

Depending on your project, you can select a specific JS library bundle:

Include a minified bundle version by adding .min before .js.

By default, minified (and without jQuery) uploadcare.min.js is exported to NPM and other package managers.

Global installation

Get your public API key and include this into the <head>:

1<script>
2  UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';
3</script>
4<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>

Note: If you already use jQuery, you can use the alternative bundle that comes without jQuery, so you won’t download it twice.

Now you can use the Uploader:

1<input type="hidden" role="uploadcare-uploader" name="my_file_input" />

NPM

$npm install uploadcare-widget
1import uploadcare from 'uploadcare-widget'

You can get the widget instance and configure it with configuration object:

1<input id="uploader" type="hidden" />
1const widget = uploadcare.Widget("#uploader", { publicKey: 'YOUR_PUBLIC_KEY' });

Configure

Set of features, such as upload sources, image editing tools, can be customized via the widget options.

You can have mixed settings for different widget instances. Global variables will affect all File Uploader instances, and local attributes will override global settings.

Here’s how you can configure jQuery File Uploader:

Global variables

Globals are specified as global JavaScript variables in your <script> tag. For example:

1<script>
2  UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';
3  UPLOADCARE_LOCALE = 'ru';
4  UPLOADCARE_CLEARABLE = true;
5</script>

Local attributes

Local options are specified in the target <input> tag as data-* attributes. For example:

1<input type="hidden" role="uploadcare-uploader"
2  data-public-key="YOUR_PUBLIC_KEY"
3  data-images-only
4/>

When setting boolean options locally in HTML tag attributes, any value or no value is considered as true:

1<input data-option="true" />
2<input data-option="any-value" />
3<input data-option="" />
4<input data-option />

To disable a local option, use either:

1<input data-option="false" />
2<input data-option="disabled" />

Settings object

Most of the widget options can also be set within the settings object. See the jQuery File Uploader API reference for more details. For example:

1<input id="uploader" type="hidden" />
1const widget = uploadcare.Widget("#uploader", {
2  publicKey: 'YOUR_PUBLIC_KEY',
3  imagesOnly: true,
4  crop: '300x200'
5});

Upload sources

jQuery File Uploader supports more than a dozen of upload sources, including local file storage, web camera; external URL; cloud services, and social networks. In UI, the sources are shown as tabs.

The set of enabled upload sources is controlled via the data-tabs option.

List of supported upload sources

CodeFile SourceDefault
fileLocal diskOn
cameraLocal webcamOn
urlAny URLOn
facebookFacebookOn
gdriveGoogle DriveOn
gphotosGoogle PhotosOn
dropboxDropboxOn
instagramInstagramOn
evernoteEvernoteOn
flickrFlickrOn
onedriveOneDriveOn
boxBoxOff
vkVKOff
huddleHuddleOff

Configuring upload sources

You can configure the set of upload sources globally or per jQuery File Uploader instance. The global parameter is called UPLOADCARE_TABS. Locally you can utilize the data-tabs attribute.

In both cases, you’ll pass a space-separated string with tab names.

Configuring the set of sources globally:

1<script>
2  UPLOADCARE_TABS = 'url file facebook';
3</script>

Configuring the list of sources locally:

1<input type="hidden" role="uploadcare-uploader" name="my_file"
2  data-tabs="url file facebook"
3/>

Custom tabs

You can add custom tabs into your widget. These tabs can be additional upload sources or whatever you design them to be. For example, display all uploaded files.

Registering a new tab

Register a new tab via the registerTab method.

1<div id="uploader-placeholder">Uploading. Please wait...</div>
2<script>
3function favoriteFiles(container, button, dialogApi, settings) {
4  ...
5}
6uploadcare.registerTab('favorites', favoriteFiles);
7uploadcare.openPanel('#uploader-placeholder', null, {
8  tabs: 'favorites file facebook dropbox gdrive instagram vk',
9  favoriteFiles: [...]
10});
11</script>

Coding tab’s actions

Once the tab is registered, write a custom code. The following code will display uploaded images made with this widget instance. It’ll pass a list of file UUIDs with the settings object. When a user selects a file for uploading, the file info can be passed to the dialog using dialogApi.

1function favoriteFiles(container, button, dialogApi, settings) {
2  $.each(settings.favoriteFiles, function(i, uuid) {
3    container.append($('<img>', {
4        'class': 'favorite-files-image',
5        'src': settings.cdnBase + '/' + uuid + '/-/scale_crop/280x280/center/',
6      })
7      .on('click', function(e) {
8        dialogApi.addFiles([uploadcare.fileFrom('uploaded', uuid, settings)])
9      })
10    );
11  });
12}

Adjusting the look

Customize your custom tab’s look via CSS. Use <svg> and <symbol> elements:

1<svg width="0" height="0" style="position:absolute">
2  <symbol id="uploadcare--icon-favorites" viewBox="0 0 32 32">
3    <path d="M 16 22.928 L 23.416 27.4 L 21.454 18.965 L 28 13.292 L 19.37 12.552 L 16 4.6 L 12.629 12.552 L 4 13.292 L 10.546 18.965 L 8.584 27.4 Z"/>
4  </symbol>
5</svg>
1.uploadcare--menu__item_tab_favorites.uploadcare--menu__item_current {
2  color: #f0cb3c;
3}

Custom tab in action

Here’s a live example of jQuery File Uploader with the custom tab we’ve just created. It displays images uploaded with this the uploading widget instance:

Multiple file uploading

jQuery File Uploader allows you to upload multiple files in one go. Each file will have its tiny progress bar and a preview when it’s uploaded.

Uploading multiple files with individual progress bars

The uploading widget will display individual errors if some files couldn’t be uploaded (e.g., due to size or format validation failure) and it won’t affect the rest of the upload.

Enable batch uploading

Enable batch file uploading with the data-multiple attribute in the widget <input> element.

1<input type="hidden" role="uploadcare-uploader" name="my_files"
2  data-multiple="true"
3/>

Check out multiple file uploading:

Multiple file uploads are collected as file groups with respective group_id as opposed to single file UUIDs.

Automatically resize uploaded images

jQuery File Uploader lets you accept hi-res images and shrink them in size to a reasonable resolution, keeping the original aspect ratio.

Benefits of automatic image resize on upload:

  • Users don’t need to downscale images on their devices to meet the uploading requirements.
  • Optimized storage.
  • Faster uploading.

Use the data-image-shrink option to apply client-side image resize with values like:

  • 800x600, shrinks images to 0.48 megapixels with the default JPEG quality of 80% (default, when not set).
  • 1600x1600 95%, shrinks images to 2.5 megapixels with the JPEG quality set to 95%.

Specs and limits

The output resolution limit for data-image-shrink is 268 MP (e.g., 16384x16384). It conforms to the maximum resolution that WebKit desktop browsers support. We recommend not to use values greater than 16.7 MP (4096x4096), because it’s a current limit for iOS devices.

Uploaded images won’t be shrunk in the following cases:

  • When a client browser doesn’t support a specified output resolution.
  • For images uploaded from social media and URLs.
  • If the original resolution is less than 2x larger than the target resolution. For example, it won’t shrink a 2560x1560px (4 MP) image to 1600x1600px (2.5 MP). It will work if you had a 2448x3264px (8 MP) input image. This limitation preserves an optimal image quality and file size balance.
  • If the image color mode is CMYK.

The output format will be JPEG by default unless your input image has an alpha channel (transparency). In this case, PNG will be used instead. Grayscale images will be converted to RGB.

EXIF and ICC profile info is copied as-is and includes an original image orientation, camera model, geolocation, and other settings of an original image.

Resize to 1 MP on a client side:

1<input type="hidden" role="uploadcare-uploader" name="my_file"
2  data-preview-step=""
3  data-image-shrink="1024x1024"
4/>

Resize multiple files to 0.4 MP on a client side:

1<input type="hidden" role="uploadcare-uploader" name="my_files"
2  data-multiple=""
3  data-image-shrink="640x480"
4/>

Localization

jQuery File Uploader is highly customizable and implements UI localization and custom pluralization rules. With locales, you can make your app instantly adapt to user languages.

There currently are:

You can either set an existing locale or add a custom one along with its pluralization rules.

Adding a locale

You can add your localization, if there’s no one yet, by forking the main jQuery File Uploader repo and adding a new localization file to this list.

Another option is overriding specific locale items in your global uploading widget configuration:

1UPLOADCARE_LOCALE = 'en';
2UPLOADCARE_LOCALE_TRANSLATIONS = {
3  buttons: {
4    cancel: 'Cancel',
5    remove: 'Remove',
6    choose: {
7      files: {
8        one: 'Choose a file',
9        other: 'Pick files'
10      },
11      images: {
12        one: 'Choose an image',
13        other: 'Load images'
14      }
15    }
16  }
17};

The default is an English locale. If a string item is missing in a locale you created or customized, English will be a fallback.

Uploading errors can also be redefined in the locale. You can see errors reference.

Pluralization rules

Pluralization rules may vary in different languages. In the English locale, there’ll be "1 file", but "3 files". This rule is described under the file: key in the locale file.

Strings with quantitative values are based on what a pluralization function returns. You’ll pass a number into a function, and it’ll output a subkey related to your input.

1function pluralize(number) {
2  // do something
3  return 'some_subkey';
4}

There are two subkeys for the English localization: one and the other. However, it can get more complex with other languages. For example, take a look at the file: subkeys for the Russian locale. The %1 sequence is used to format numbers into pluralized strings.

Each locale we provide with jQuery File Uploader is supplied with its Unicode-based pluralization rules. If you wish to override those, you can define a custom pluralization function and assign it to the UPLOADCARE_LOCALE_PLURALIZE variable.

The following setting makes the widget use the message under the some subkey for input numbers from 2 to 10:

1UPLOADCARE_LOCALE_TRANSLATIONS = {
2  file: {
3    one: 'Only one file! :(',
4    some: 'Only %1 files. Upload more.',
5    many: '%1 files!! That\'s a lot.'
6  }
7};
8UPLOADCARE_LOCALE_PLURALIZE = function(n) {
9  if (n === 1) return 'one';
10  if (n > 1 && n <= 10) return 'some';
11  return 'many';
12};

Styling

jQuery File Uploader can be easily integrated into your product and match your website look or a web app’s UI.

Styling With CSS

jQuery File Uploader is thoroughly annotated with CSS classes. It’s your starting point into deeper customization. You can find a class for every widget item by inspecting its elements or sifting through jQuery File Uploader source code.

The uploading widget dialog window look can be customized via the uploadcare--dialog class.

Changing uploader button color

Changing the button color is one of the most common cases:

Button shadow

You can add shadow and experiment with fonts and colors:

Uploading circle color

You can display the file uploading progress. The fill color can be changed via the CSS color property, while border-color will work for your background.

Here, you can test the widget with a customized uploading circle:

Custom progress bar

You can replace the built-in progress bar. To do that, you need to add a listener to the current widget instance and get it in the onChange callback. It’ll be a file object for the regular widget or a group object for multiple widgets. After that, listen to the progress event and change your progress bar according to the current uploadProgress.

The following installProgressBar function does all that. It receives the two arguments: the widget instance and a progress bar DOM element. Everything else runs on CSS, animation included.

Uploaded image preview

The default jQuery File Uploader behavior is to show an image preview when a user selects an image. You might want to embed this preview on your page somewhere around the widget button. Such a preview could be more informative than simply displaying file names and sizes.

Note, you have full control over the size and position of your embed. Just use CSS.

Image preview for a multi-file widget may look differently:

You can change the displayed images or rearrange the existing ones; all changes will then be reflected in the thumbnail list.

jQuery File Uploader embed

User experience means the world to us. Therefore, we provide a lot of customization options that cover both jQuery File Uploader appearance and behavior.

The look of jQuery File Uploader can be changed via CSS, is a great starting point for controlling your widget behavior.

Another thing you can do is to embed jQuery File Uploader as a panel as opposed to a default dialog window.

Embed jQuery File Uploader using panel

By default, the widget dialog appears on a button click. The dialog will appear in a lightbox, which overlays your page’s content and dims the background.

However, you might want to show the widget interface right away. This appearance is named panel.

1<div id="uploader-placeholder">Uploading. Please wait...</div>
2<script>uploadcare.openPanel('#uploader-placeholder');</script>

The snippet above replaces your DOM element with the uploadcare-placeholder ID and puts it in place once a user selects a file. This can be used to indicate the uploading process. Also, the panel can be closed by simply selecting a file.

Panel styling

Similar to jQuery File Uploader dialog, the panel can be customized.

The appearance of your embed can be changed via CSS. In this example, we remove a sharp border:

1#uploader-styling {
2  margin-top: 10px;
3}
4#uploader-styling .uploadcare--panel,
5#uploader-styling .uploadcare--menu__item,
6#uploader-styling .uploadcare--menu__items {
7  background-color: transparent;
8  border: 0;
9}
10#uploader-styling .uploadcare--panel {
11  flex-direction: column;
12}
13#uploader-styling .uploadcare--menu {
14  width: 100%;
15  height: 60px;
16  min-height: 60px;
17}
18#uploader-styling .uploadcare--menu__items {
19  padding-right: 0;
20  flex-direction: row;
21}

Some dialog elements are rendered as iframe by Uploadcare servers, which doesn’t let you customize CSS. However, we provide a set of specific methods to inject CSS into iframes.

Image crop

Cropping images is one of the most common tasks, so we added it right in the jQuery File Uploader UI.

jQuery File Uploader features a good bunch of crop options, including free crop. Adding the feature to your widget instance is done by implementing the data-crop option.

Note that it’ll add an additional step of image editing.

How cropping works

Technically, image cropping works as post-processing via the Image processing feature:

  • Original images go to an Uploadcare project associated with a Public Key set as your widget instance.
  • The crop is applied as the crop image processing operation by injecting its URL directive into original URLs.
  • The widget returns resulting CDN URLs with an injected crop.

Configuring crop

Crop options are held inside the data-crop attribute as a comma-separated string with presets names. When you define several presets, users will be able to choose from the related crop options right in the UI.

Each crop preset is a combination of a size or ratio definition and an optional keyword:

  • "disabled", crop is disabled. It can’t be combined with other presets.
  • "" or "free", crop is enabled. Users can freely select any crop area on their images.
  • "2:3", any area with the aspect ratio of 2:3 can be selected for cropping.
  • "300x200" — same as above, but if the selected area is greater than 300x200 pixels, the resulting image will be downscaled to fit the dimensions.
  • "300x200 upscale" — same as above, but even if the selected area is smaller, the resulting image gets upscaled to fit the dimensions.
  • "300x200 minimum" — users won’t be able to define an area smaller than 300x200 pixels. If an image we apply the crop to is smaller than 300x200 pixels, it will be upscaled to fit the dimensions.

Default files in the widget dialog

jQuery File Uploader allows you to make specified files appear in jQuery File Uploader dialog on open.

Specify these files by adding the value attribute to your widget <input> element. The attribute may either be empty or hold a file CDN URL or UUID.

If you set the value externally and trigger the DOM change event, it affects the widget. For instance, setting it to a file UUID or a CDN URL will result in that the file being loaded into jQuery File Uploader. You can apply it anytime, and it’ll take effect immediately.

Here’s how you do it:

1<input type="hidden" role="uploadcare-uploader" name="my_file"
2  data-public-key="YOUR_PUBLIC_KEY"
3  value="https://ucarecdn.com/05da8fb8-bbe9-4da1-a79c-eaf5979152db/"
4/>
5<!--
6  Also valid:
7  value="05da8fb8-bbe9-4da1-a79c-eaf5979152db"
8-->

JS snippets and CSS tricks

In this cookbook part, you can find popular code examples and resolutions of common tasks when working with jQuery File Uploader. Less words, more code!

Paste an image from the clipboard

1const widget = uploadcare.Widget("[role=uploadcare-uploader]");
2
3widget.onDialogOpen((dialog) => {
4  function uploadFromClipboard(e) {
5    let data = e.clipboardData;
6    if (!!data && !!data.items.length) {
7      // check if clipboard data is image
8      if (data.items[0].type.indexOf("image") != 0) {
9        alert("No image in the clipboard");
10        return;
11      }
12      let blob = e.clipboardData.items[0].getAsFile();
13      dialog.addFiles("object", [blob]);
14    }
15  }
16  window.addEventListener("paste", uploadFromClipboard);
17});

Get a CDN URL of an uploaded file

For a single-upload widget.

1// get a widget reference
2const widget = uploadcare.SingleWidget("[role=uploadcare-uploader]");
3
4// listen to the "upload completed" event
5widget.onUploadComplete(fileInfo => {
6  // get a CDN URL from the file info
7  console.log(fileInfo.cdnUrl);
8});

Get CDN URLs of uploaded files

For a multi-upload widget.

1// get a widget reference
2const widget = uploadcare.MultipleWidget("[role=uploadcare-uploader]");
3
4// listen to the "change" event
5widget.onChange(function (group) {
6  // get a list of file instances
7  group.files().forEach(file => {
8    // once each file is uploaded, get its CDN URL from the fileInfo object
9    file.done(fileInfo => {
10      console.log(fileInfo.cdnUrl);
11    });
12  });
13});

Get a group CDN URL

For a multi-upload widget.

1// get a widget reference
2const widget = uploadcare.MultipleWidget("[role=uploadcare-uploader]");
3
4// listen to the "upload completed" event
5widget.onUploadComplete(groupInfo => {
6  // get CDN URL from group information
7  console.log(groupInfo.cdnUrl);
8});

Get a CDN URL of an uploaded file/group

For a dialog window.

1// create a new dialog object
2const dialog = uploadcare.openDialog(null, '', {
3  multiple: false // set to true for multi-file uploads
4});
5
6// get a file or group instance
7dialog.done(res => {
8  // once a file or group is uploaded, get its CDN URL
9  res.promise().done(info => {
10    console.log(info.cdnUrl);
11  });
12});

Get a camera-recorded video duration

1// get widget reference
2const widget = uploadcare.Widget("[role=uploadcare-uploader]");
3
4let cameraRecDuration = null;
5let recStart = null;
6let recEnd = null;
7
8// calculate webcam recording duration
9document.body.addEventListener("click", e => {
10  // user clicks "start recording"
11  if (e.target.classList.contains("uploadcare--camera__button_type_start-record")) {
12    recStart = new Date().getTime();
13  }
14  // user clicks "stop recording"
15  if (e.target.classList.contains("uploadcare--camera__button_type_stop-record")) {
16    recEnd = new Date().getTime();
17    cameraRecDuration = (recEnd - recStart) / 1000;
18    console.log("Duration: ", cameraRecDuration);
19  }
20});

Check if a file was added or removed

1// get widget reference
2const widget = uploadcare.Widget("[role=uploadcare-uploader]")
3// get dialog object to access its API
4widget.onDialogOpen(dialog => {
5  // listen to "file added" event
6  dialog.fileColl.onAdd.add(file => {
7    console.log("File added", file)
8  });
9  // listen to "file removed" event
10  dialog.fileColl.onRemove.add(file => {
11    console.log("File removed", file)
12  });
13});

Get the upload source

1// get widget reference
2const widget = uploadcare.Widget("[role=uploadcare-uploader]");
3
4// listen to the "upload completed" event
5widget.onUploadComplete(fileInfo => {
6  // get source details from file information
7  console.log(fileInfo.sourceInfo.source);
8});

Add an overlay to the crop

1.uploadcare--jcrop-tracker::after{
2  content: "";
3  position: absolute;
4  width: 100%;
5  height: 100%;
6  left: 0;
7  /* URL of the overlay image */
8  background-image: url(<https://i.imgur.com/hSbF6v0.png>);
9  background-size: cover;
10  background-position: center;
11}
12
13.uploadcare--jcrop-tracker:first-of-type{
14  opacity: 1 !important;
15  background-color: transparent !important;
16}
Adding an overlay
Adding an overlay

Get a selected crop preset

1<input type="hidden" role="uploadcare-uploader" name="my_file" id="uploadcare-file" data-crop="2:3, 5:6, 16:9" />
1let currentPreset = '2:3';
2
3document.addEventListener('click', e => {
4  // user clicks on a crop preset icon
5  if (e.target.classList.contains('uploadcare--crop-sizes__item') || e.target.classList.contains('uploadcare--crop-sizes__icon')) {
6    // get the caption of the preset selected
7    currentPreset = document.querySelector('.uploadcare--crop-sizes__item_current').dataset.caption;
8    console.log(currentPreset);
9  }
10});

Upload an image from Base64

1// original base64 image
2const b64data = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
3
4// convert dataURI to a File object
5function dataURLtoFile(dataurl, filename) {
6  let arr = dataurl.split(','),
7      mime = arr[0].match(/:(.*?);/)[1],
8      bstr = atob(arr[1]),
9      n = bstr.length,
10      u8arr = new Uint8Array(n);
11  while (n--) {
12    u8arr[n] = bstr.charCodeAt(n);
13  }
14  return new File([u8arr], filename, {type:mime});
15}
16
17// convert a base64 image to a File object
18const fileToUpload = dataURLtoFile(b64data, "image");
19
20// upload the file to Uploadcare
21let upload = uploadcare.fileFrom("object", fileToUpload);
22
23upload.done(fileInfo => {
24  console.log("File uploaded: ", fileInfo.cdnUrl);
25});

Render the uploaded image preview

1// get widget reference
2const widget = uploadcare.Widget("[role=uploadcare-uploader]");
3
4widget.onUploadComplete(fileInfo => {
5  const preview = document.createElement("img");
6  // create a preview of the uploaded image of 200px width
7  preview.src = fileInfo.cdnUrl + "-/resize/200x/";
8  // add the thumbnail to the page
9  document.body.appendChild(preview);
10});

Add custom names to crop presets

1<input type="hidden" role="uploadcare-uploader" name="my_file" id="uploadcare-file" data-crop="free,1:1,2:3" />
1.uploadcare--crop-sizes__item {
2  overflow: visible;
3}
4.uploadcare--crop-sizes__item:nth-child(1)::after {
5  content: "Free form";
6}
7.uploadcare--crop-sizes__item:nth-child(2)::after {
8  content: "Square";
9}
10.uploadcare--crop-sizes__item:nth-child(3)::after {
11  content: "Portrait";
12}
Crop preset names
Crop preset names

Add custom widget button labels

1<input type="hidden" role="uploadcare-uploader" id="uploadcare-file-1" data-btn-text="I'm the first buton" />
2<input type="hidden" role="uploadcare-uploader" id="uploadcare-file-2" data-btn-text="I'm the second one" />
3<input type="hidden" role="uploadcare-uploader" id="uploadcare-file-3" data-btn-text="And I am the third" />
1// get an array of widget references
2const widgets = uploadcare.initialize();
3
4// update each widget button text with the data-btn-text attribute's value
5widgets.forEach(widget => {
6  widget.inputElement.nextSibling.querySelector(".uploadcare--widget__button_type_open").innerHTML = widget.inputElement.getAttribute("data-btn-text");
7});
Custom button captions
Custom button captions

Reset the widget after upload

1// get widget reference
2const widget = uploadcare.Widget("[role=uploadcare-uploader]");
3
4// once a file is uploaded, output its URL and reset widget
5widget.onUploadComplete(fileInfo => {
6  console.log(fileInfo.cdnUrl);
7  widget.value(null);
8});

Add a custom message to the dialog

1/* turn the "after" pseudo element of the dialog container's div into a hint */
2.uploadcare--tab__content::after {
3  content: "Wake up Neo... The Matrix has you... Follow the white rabbit🐇";
4  padding: 1em;
5  margin: 2em;
6  background-color: #000;
7  color: #00ff00;
8  border-radius: 5px;
9}
Custom hint message
Custom hint message

Video record time limit

1const SECOND = 1000;
2
3// record time limit
4const TIME_LIMIT = 5 * SECOND;
5
6const widget = uploadcare.Widget("[role=uploadcare-uploader]");
7
8widget.onDialogOpen((dialog) => {
9  // Listen to a click on the Start button
10  dialog.dialogElement[0].addEventListener("click", (e) => {
11    if (
12      e.target.classList.contains(
13        "uploadcare--camera__button_type_start-record"
14      )
15    ) {
16      const stopBtn = dialog.dialogElement[0].querySelector(
17        ".uploadcare--camera__button_type_stop-record"
18      );
19
20      // Diasplay countdown on Stop button
21      let remaining = TIME_LIMIT;
22      stopBtn.innerText = `Stop (in ${remaining / 1000}s)`;
23      let counter = setInterval(() => {
24        remaining -= 1000;
25        if (remaining <= 0) {
26          clearInterval(counter);
27        }
28        stopBtn.innerText = `Stop (${remaining / 1000}s)`;
29      }, 1000);
30
31      // Click Stop button (stop recording) after TIME_LIMIT
32      setTimeout(() => {
33        stopBtn.click();
34      }, TIME_LIMIT);
35    }
36  });
37});

Versioning

When we introduce backward-incompatible changes, we release new major versions. Once published, such versions are supported for 2 years. You will still be able to use any file uploader version after its support term at your own risk.

VersionDate PublishedSupported Until
File Uploader (1.x)5 Aug 2024TBD
File Uploader (0.x)18 May 20235 Aug 2024
jQuery File Uploader (3.x)28 Jun 201717 Oct 2022
2.x20 Feb 20151 Jan 2020
1.x21 Mar 20141 Jun 2019
0.x6 Sep 20121 Jun 2019