How do I make the widget's input required in a form?

FAQ
1

The widget uses an input field of type hidden. According to the HTML specification, the required attribute doesn’t work with this input type. However, you can change the type to text and hide the input with CSS. Thus you’ll be able to set HTML validation and error messages. For example,

<input
    type="text"
    role="uploadcare-uploader"
    name="upload"
    style="width:0px;height:0px;border:0;outline:none;"
    oninvalid="this.setCustomValidity('Upload a file')"
    data-public-key="demopublickey"
    required
>

You can set a custom verification message via the oninvalid attribute

Once a file is uploaded, you need to update the input’s value attribute by setting it to the CDN URL of the uploaded file and reset the custom validation message:

const widget = uploadcare.Widget("[role=uploadcare-uploader]");

widget.onUploadComplete((info) => {
  widget.inputElement.setAttribute("value", info.cdnUrl);
  widget.inputElement.setCustomValidity("");
});