# 🌄 Enforced Image Picker Upload Limit

**URL:** <https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial, custom-code\
**Created:** [August 10, 2024, 5:07am UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571 "2024-08-10T05:07:15Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 10, 2024, 5:07am UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/1 "2024-08-10T05:07:15Z")

</div>

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"]`.

 ![Screenshot 2024-08-10 at 10.57.32](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/f/9f04a3624d31facf5f537e021cd0d7174b6b7f31.png)

```auto
/*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;
}

```

 ![Screenshot 2024-08-10 at 19.28.56](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2eaab249e9aea287eee66d2942949cb625055a6c.png)

```auto
/*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:
1. **[Exploring the Enhanced Capabilities of Glide’s Native Form](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876)**
2. **[Enhance Native Form: Prevent Submit and Display Dynamic Messages](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521)**

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [August 10, 2024, 5:19am UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/2 "2024-08-10T05:19:49Z")

</div>

As brilliant as ever!

---

<div class="post-metadata">

**Author:** ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)\
**Post date:** [August 10, 2024, 11:46am UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/3 "2024-08-10T11:46:30Z")

</div>

This is Gold…Thanks

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [August 10, 2024, 7:19pm UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/4 "2024-08-10T19:19:26Z")

</div>

Bookmarked!

---

<div class="post-metadata">

**Author:** ![burningmikey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/burningmikey/32/49706_2.png) [@burningmikey](https://community.glideapps.com/u/burningmikey)\
**Post date:** [August 15, 2024, 8:07pm UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/6 "2024-08-15T20:07:32Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 15, 2024, 9:28pm UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/7 "2024-08-15T21:28:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 15, 2024, 11:56pm UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/8 "2024-08-15T23:56:47Z")

</div>

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._**

```auto
#page-root:has([data-testid="picker-image"] .uploading) [aria-label="Submit"] {
    pointer-events: none;
    opacity: 0.4;
}

```

---

<div class="post-metadata">

**Author:** ![burningmikey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/burningmikey/32/49706_2.png) [@burningmikey](https://community.glideapps.com/u/burningmikey)\
**Post date:** [August 16, 2024, 2:06am UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/9 "2024-08-16T02:06:05Z")

</div>

Awesome, thank you for this! The greyed out button until photos are uploaded is amazing, and can only be done with CSS indeed!

---

<div class="post-metadata">

**Author:** ![burningmikey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/burningmikey/32/49706_2.png) [@burningmikey](https://community.glideapps.com/u/burningmikey)\
**Post date:** [August 18, 2024, 5:20pm UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/10 "2024-08-18T17:20:57Z")

</div>

> [@Himaladin](#):
>
> ```auto
> #page-root:has([data-testid="picker-image"] .uploading) [aria-label="Submit"] {
> pointer-events: none;
> opacity: 0.4;
> }
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 18, 2024, 11:28pm UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/11 "2024-08-18T23:28:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![burningmikey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/burningmikey/32/49706_2.png) [@burningmikey](https://community.glideapps.com/u/burningmikey)\
**Post date:** [August 19, 2024, 7:59pm UTC](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571/12 "2024-08-19T19:59:48Z")

</div>

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