I have a form with an upload field, and usually the user will upload many files at a time - but the submit button becomes available before all of the files are uploaded, so only the files that are finished get included in the submission.
Is there a way to force the submit button to remain unavailable until all files are finished uploading?
Not natively, that I am aware of.
The way I normally handle this is with a hint component to warn the user:
Not completely foolproof, but it generally works.
Quite possibly you might be able to do something with CSS, assuming you have a plan that supports it. Check out the below thread:
Because the number of images being uploaded is unknown, the following method can be used to actively prevent the form from being submitted:
Provide a class name in the container: uploadProcessing
/*Uploading*/
#page-root:has(.uploadProcessing [data-testid="picker-image"] .uploading) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}
Please help check, as I currently don’t have large file size images to test this accurately.
Could the button’s action be changed to “wait for condition”?
Instead of the native “submit” you can change the action to include other actions. One of those is “wait for condition”.
If there is a way to have a data point on the data table for where the files are being uploaded then you could set up a column in the data table to show “Uploads Completed” and then when this column says that the condition is met. I’ve not done many data uploads at once like you are saying, but an example would be “if column File Upload # has url then Upload Complete” If not, “wait for upload”.
My suggestion might only work if your initial add files button creates a new row before the submit button does. Not sure if it’d work, but maybe something like:
Custom Action: Add Row + Show new screen for this item
One new screen: All of your upload and text (this could be copied from the current add screen)
On Submit: Set the wait for condition to check for uploads complete
Apologies @Kellar, I copied the wrong code; it turns out that was for multiple image pickers. However, both have almost identical code, where one is [data-testid=‘picker-image’] and the other is [data-testid=‘picker-file’].
/*Uploading*/
#page-root:has(.uploadProcessing [data-testid="picker-file"] .uploading) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}
Thank you @Himaladin; it looks great, but my plan doesn’t support CSS anyway, so I’m going to have to put a notice on the button.
OR, I may have the file upload occur after submission, since the form triggers a webhook that goes to zapier anyway; no big deal to add a step in the zap to text or email the google drive folder link.