Uploading Multiple Files With the Widget

  • This is for the version 3.x of the widget. If you're looking for the widget v2 docs, check here
  • Here’s how you migrate from v2 to v3.

Uploadcare Widget is a File Uploader allowing you to handle multiple files in one go and track progress via individual progress bars.

The multi-uploading behavior is enabled by adding the boolean data-multiple attribute set to true to your widget <input> element, the one having its role specified as role="uploadcare-uploader".

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

Here is the live widget with multiple file uploads enabled,

Loading...

Once many files are uploaded, they get stored as a file group. You then get a group_id instead of a file UUID in the value. File group IDs look like this,

088de3b6-c5f2-4f56-9e9c-87b0b960286e~3

File group IDs resemble UUIDs but have a trailing ~N sequence where N stands for the number of files in that group. Depending on your file storing settings, groups can be stored automatically or by making a REST API request.

group_id can be used to address any single file in a group on our CDN,

http://ucarecdn.com/088de3b6-c5f2-4f56-9e9c-87b0b960286e~3/nth/0/
http://ucarecdn.com/088de3b6-c5f2-4f56-9e9c-87b0b960286e~3/nth/1/
http://ucarecdn.com/088de3b6-c5f2-4f56-9e9c-87b0b960286e~3/nth/2/

The latter also means you can apply Image Transformations to individual files in a group,

http://ucarecdn.com/088de3b6-c5f2-4f56-9e9c-87b0b960286e~3/nth/0/-/scale_crop/300x300/center/

Note, when trying to access a Group ID via a browser, you will see a list of unique file UUIDs in this group.