Widget usage

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

Once you’re done installing the widget and checking out its requirements, there are two simple steps to start using it.

Set your public key

A public key set in your widget tells it which account uploads will go to.

You can set that option in the <head> section,

<script>
  UPLOADCARE_PUBLIC_KEY = 'demopublickey';
</script>

Note, your secret key is not required to use the widget. Secret keys are used when you want extra security hence your page body should not include any of those.

Add widget to your form

You’re now ready to insert the widget element into your form,

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

By default, the widget library looks for inputs with that specific role attribute and adds widgets where it finds those. When a file is uploaded with your widget, <input> gets a CDN URL with a UUID of that file. Your server then receives such link instead of file contents.

We suggest placing a widget somewhere at the top of your form. Unlike regular inputs, our widget starts uploading files right after they get selected by a user, not on form submission. This helps users fill out the rest of your form while their files are uploading in the background. That can be a real time saver.

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.