Webflow: Binding Upload to Field

[Rosario_Concha]

Hi there!

I came across this guide, and it works well in placing the link into the field.

However, what I need is to place several instances of the uploader into a form, populating different inputs.
For example:
Upload widget 1: Birth Certificate – link bound to text field to take to CMS under the birth certificate field
Upload widget 2: Request Letter – link bound to text field 2 to take to CMS under the letter field

And so on. I understand that you can upload several files in one go, but I really need to assign the link to the correct cms field.

How can I achieve this?

[Alex (Alex Chernenko)]

Hi @Rosario_Concha, you can create as many input fields with role=uploadcare-uploader as you need. Just make sure they have different values of the name attributes.

To ensure the URLs of the uploaded files are properly linked to the fields, you’ll need to add this script to the page (before </body>).

<script>
UPLOADCARE_PUBLIC_KEY = "YOUR_PUBLIC_KEY";

uploadcare.initialize().forEach(function (widget) {
  widget.inputElement.type = "text";
  widget.inputElement.style =
    "width:0px;height:0px;border:0;outline:none;padding:0;";
  widget.inputElement.required = true; // set to false if not required

  widget.onUploadComplete(function (info) {
    // Update widget input's value
    widget.inputElement.setAttribute("value", info.cdnUrl);
  });
});
</script>```