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?

You might want to try this method: [image] sunrise_over_mountains Enforced Image Picker Upload Limit Community Resources 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…

[image] dezwatz: Also, is there a way to disable the submit button until all files have been uploaded? /*Prevent - Submit*/ #page-root:has(.uploading) [aria-label="Submit"] { pointer-events:none; opacity:0.4; }

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

That is awesome! How are you doing that?

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

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%; } }

Loading Bar and Disable Submit for Multiple File Upload

Ask for Help

Himaladin January 31, 2025, 4:47am 2

You might want to try this method:

Topic		Replies	Views
Can the Submit Button be made to wait until all uploads are complete? Ask for Help	6	142	August 16, 2024
🌄 Enforced Image Picker Upload Limit Community Resources custom-css , tutorial , custom-code	10	361	August 19, 2024
Show upload progress for multiple file uploads Feature Requests	2	195	October 10, 2023
Upload a single file in file picker Ask for Help components	3	150	September 14, 2024
Any way to Limit what type of files can be uploaded Ask for Help	3	68	March 27, 2026

Loading Bar and Disable Submit for Multiple File Upload

Related topics