# Loading Bar and Disable Submit for Multiple File Upload

**URL:** <https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [January 30, 2025, 3:56pm UTC](https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669 "2025-01-30T15:56:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dezwatz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dezwatz/32/77903_2.png) [@dezwatz](https://community.glideapps.com/u/dezwatz)\
**Post date:** [January 30, 2025, 3:56pm UTC](https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669/1 "2025-01-30T15:56:51Z")

</div>

Is there a way to display the loading bar for multiple files so that users do not submit the form after one file has been uploaded?

Also, is there a way to disable the submit button until _all files_ have been uploaded?

---

<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:** [January 31, 2025, 4:47am UTC](https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669/2 "2025-01-31T04:47:36Z")

</div>

You might want to try this method:

> [@sunrise\_over\_mountains Enforced Image Picker Upload Limit](https://community.glideapps.com/t/enforced-image-picker-upload-limit/75571):
>
> 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 cont…

---

<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:** [January 31, 2025, 3:21pm UTC](https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669/3 "2025-01-31T15:21:39Z")

</div>

> [@dezwatz](#):
>
> Also, is there a way to disable the submit button until _all files_ have been uploaded?

```auto
/*Prevent - Submit*/
#page-root:has(.uploading) [aria-label="Submit"] {
pointer-events:none;
opacity:0.4;
}

```

---

<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:** [February 7, 2025, 4:47pm UTC](https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669/4 "2025-02-07T16:47:38Z")

</div>

Fake loading bar…  
 ![ScreenRecording2025-02-01at14.25.28-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/0/002f33e8bf182199cccff20b6ae8e8d00648e2f5.gif)

---

<div class="post-metadata">

**Author:** ![dezwatz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dezwatz/32/77903_2.png) [@dezwatz](https://community.glideapps.com/u/dezwatz)\
**Post date:** [February 7, 2025, 5:25pm UTC](https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669/5 "2025-02-07T17:25:21Z")

</div>

That is awesome!

How are you doing that?

---

<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:** [February 7, 2025, 6:02pm UTC](https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669/6 "2025-02-07T18:02:49Z")

</div>

This is just all CSS animations, not a loading bar that can accurately track progress.

---

<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:** [February 7, 2025, 6:24pm UTC](https://community.glideapps.com/t/loading-bar-and-disable-submit-for-multiple-file-upload/79669/7 "2025-02-07T18:24:49Z")

</div>

The native Glide way of handling Multiple File Picker dims the file name while the file is in the process of uploading. The code below is just a fake Loading Bar that does not show the actual progress but instead uses CSS to create a simulated animation based solely on duration. This Loading Bar appears when a file is being uploaded and disappears once the upload is complete.

```auto
.uploading p {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

.uploading p::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
}

.uploading p::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: var(--gv-text-accent);
    border-radius: 2px;
    animation: progress-animation 15s infinite linear; /* Set the duration as you wish*/
}

@keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 100%; }
}

```