Loading Bar and Disable Submit for Multiple File Upload

Ask for Help
1

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?

2

You might want to try this method:

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

Fake loading bar…
ScreenRecording2025-02-01at14.25.28-ezgif.com-video-to-gif-converter

1 Like
5

That is awesome!

How are you doing that?

6

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

1 Like
7

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.

.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%; }
}
1 Like