Just a quick update on a change we’ve made to the Upload Button to improve the visitor experience.
The Upload Button now performs these two validations immediately after a visitor selects a file:
Checks that the file extension is one of the supported extensions for this type of file.
Verifies that the file size does not exceed the maximum size for this type of file.
What does it mean?
When selecting a file that fails any of the new validations, the Error design is applied to the Upload Button on the page, providing immediate feedback to the visitor.
Corvid users will also see that the Upload Button’s .valid property is set to False, and the .validity.fileTypeNotAllowed and/or .validity.fileSizeExceedsLimit properties are set to True. To provide your visitors with more information about the problem and what they should do, you can display the .validationMessage to them. This property either holds an explanation that the selected file is not supported, or that they should pick a file smaller than the specified limit.
How is this different from how it used to work?
Until now a visitor who selected a file that is too large or not supported did not receive any immediate feedback. The visitor would typically continue filling in a form and click a Submit button that would trigger the uploading of the file to the Media Manager. It could take up to a minute for the Media Manager server to return an error, which in turn would set .valid to False and .validity.fileNotUploaded to True. The Error design would also be applied to the Upload Button, but the visitor might not notice it - for example if she happened to scroll it out of view.
OK, that’s nice, but what’s the big deal?
Anyhow only files with supported extensions are enabled in the file picker.
This actually depends on your visitors’ browser and OS. For example, visitors who surf your website from the Facebook or Facebook Messenger app on Mobile will be able to pick any file in the native picker, because the Facebook browser does not provide a way to hide or disable unsupported files. With the new validations in place, at least your visitors will be confronted with the error right away.
Perhaps more importantly though, these new validations will allow us to introduce two new features to the Upload Button soon:
Let you set a custom limit on the maximum file size visitors can upload. For example, limit your visitors to documents up to 3MB (the Media Manager limit is 1000MB).
Let you set custom file extensions. For example, visitors can upload only PNG images, or only PDF Documents.
As always, you are most welcome to leave your feedback, and of course, please report any issue you experience and suspect may be related to this change.
Keep Safe and Valid!
Can someone assist with adding an upload button for customers uploading images at checkout? I need to be able to view image and see that it is connected to that particular customers information. Any help is appreciated. I have been at this for hours and I am going in circles following wix directions and doing practice checkouts.
Any update on allowing visitors to upload ONLY PDF/PNG files?
Awesome, Eyal! Thanks for the update! This is great stuff. Still really looking forward to showing visitors a progress bar while their file is uploading... ;) Would be so helpful for when they are uploading larger files!
Awesome stuff!!