Make Adding a Profile Picture using File Uploader a REQUIRED Step

[Nikolai]

Hey there,

I’m doing a sign up process through Webflow, using the file uploader to upload profile picture files. How do I make it so users HAVE to use the fie uploader to upload an image otherwise they can’t submit the profile form or continue.

I guess I need a way of checking if they have used the uploader, and showing an error message if they haven’t.

Thanks!

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

[kyle.archie]

I know this is pretty old, but I’d love to see this worked into the Shopify Integration instructions. Also, I think those might need to be updated for Shopify 2.0 Themes, such as Dawn… the new default theme.

It’s a simple thing to do the first approach. However, the problem I have in Shopify is this doesn’t surface a validation error like it does if you have a visible text box and you try to submit it without entering anything. I just makes it so the add to cart and buy now buttons don’t do anything until you select a file… but without know why that’s happening, I could see customers just hitting refresh or something thinking the page is hanging.

The second approach is interesting. But It’s a bit tricky figuring out where to put this to make it work.