Make Adding a Profile Picture using File Uploader a REQUIRED Step

[Alex (Alex Chernenko)]

Hi @Nikolai,

If the uploader is a part of a form, there’s a way to make it reuierd. See this article for details

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

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(""); });

Alternatively, you can check the widget’s value with JS before submitting the form:

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

function isFileUploaded(widget) {
  return !!widget.value();
}

// on form submit
...
if (isFileUploaded(widget)) {
  form.submit();
} else {
  alert("File is not uploaded");
}
...