Limiting the number of images uploaded at an early stage is a necessary measure to prevent exceeding the allowed storage limits in your application.
As I have posted previously, this approach is easier when controlling the Submit button on your form. In the code below, you only need to modify the :nth-child(4) part of the code to set the desired upload limit.
Since the “Multiple Image Picker” component does not have an option to specify a class name (limitToUpload), you will need to add a container component for this purpose.
If your component is a “Multiple File Picker”, simply change the selector from [data-testid=“picker-image”] to [data-testid="picker-file"].
/*Prevent - Submit&Add*/
#page-root:has(.limitToUpload [data-testid="picker-image"]:nth-child(4)) [aria-label="Submit"], #page-root:has(.limitToUpload [data-testid="picker-image"]:nth-child(4)) .minimalPrimary {
pointer-events:none;
opacity:0.4;
}
/*Warning - border*/
#page-root:has(.limitToUpload [data-testid="picker-image"]:nth-child(4)) .limitToUpload .component-root > div > div > div:nth-child(2){
border:1px solid red;
}
/*Warning - message*/
#page-root:has(.limitToUpload [data-testid="picker-image"]:nth-child(4)) .limitToUpload .component-root > div > div > div:nth-child(2):after{
content:"Upload limit exceeded !";
display: flex;
padding-top: 10px;
color: red;
justify-content:center;
}
/*Warning - message*/
#page-root:has(.limitToUpload [data-testid="picker-image"]:nth-child(4)) .limitToUpload .component-root:after{
content:"Upload limit exceeded !";
position: absolute;
right:20px;
font-size: 12px;
color: red;
bottom:10px;
}
If you want to implement simultaneous restrictions such as: the number of images, image size, maximum file size, you can use the method I posted in the following topics:
- Exploring the Enhanced Capabilities of Glide’s Native Form
- Enhance Native Form: Prevent Submit and Display Dynamic Messages
16 Likes
Thanks @Himaladin! Your CSS contributions to Glide are amazing!
One question: how is it different from using a custom form that displays/hides the submit button based on validation column in that table (e.g count uploaded photos via rollup)?
Thank you for your kind words.
If you are using a custom form, you can control the submit button via custom actions, and you don’t need to hack the submit button anymore unless you want to gray out the button.
For the same purpose as in this topic, you would need to add a rollup column, create custom actions, write a bit of code to gray out the button or apply some other styles to the file pickers, which might drain updates if your plan is still under consideration.
More importantly, the decision at the beginning is key—whether you want to start with a custom form or the native form.
2 Likes
Additionally, in a different thread, I shared the following code that can detect whether all images have been uploaded. A potential issue with custom forms is that you might not get data on how many images are still being uploaded by the user. Early prevention of failed uploads can only be achieved with the following CSS:
Note: I consider this mandatory, so my code does not assign a class name, allowing it to apply globally.
#page-root:has([data-testid="picker-image"] .uploading) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}
1 Like
Awesome, thank you for this! The greyed out button until photos are uploaded is amazing, and can only be done with CSS indeed!
1 Like
Using the descendant class .uploading doesn’t seem to work.
And there’s no easy way to fast-inspect the elements while an image is uploading.
That works on my end.
To inspect it, you can use an image with a large file size, which will give you enough time to do so.
Just a quick reminder, you don’t need to create a new class name here anymore.
My mistake, I had an error before that prevented the rest of CSS to execute!
For your information, in google chrome inspector, you can actually simulate different speed of networks! Go to the Network tab, then click on No Throttling, and change the network speed. I added a custom one “very slow network” with the following parameters:
Download: 50 kbps
Upload: 20 kbps
Latency: 500 ms
1 Like
