Make Adding a Profile Picture using File Uploader a REQUIRED Step

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!

Hi @Nikolai,

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

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

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.