uploadcaredocs

Uploading Multiple Files With the Widget

  • This documentation is for the version 3.6.2 of the widget. If you’re looking for the widget v2 docs, check here.

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,

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.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.