# 🌄 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:** 1\
**Showing post:** 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)**

---

_[View the full topic](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571)._