Has Bubble still not done this? It has been years since people have been requesting something simple like this.
Why is there not a state exposed for use in dynamic expressions from a multifile uploader element being ‘is loading’?
Come on @bubble please get this added into the multifile uploader plugin…it has been badly needed for years and shouldn’t be too difficult…after all the picture uploader has this state exposed, why can’t the multifile uploader?
The multifile uploader is very helpful, but so ugly in the design during upload that it is necessary to get it hidden and to do that easily we need access to a state of ‘is loading’…
Anybody have another way to hide the element when it is starting to load?
Only thing is from over 2 years ago and could be so much simpler and doesn’t work in the event the user decides not to choose any files to upload as it has to rely on the ‘uploader value is changed’ trigger which obviously won’t trigger until the upload has been finished.
@bubble how about a little hackathon and get some cheap wins for the community?
Would be nice if this is indeed just an exposed state.
I found a workaround based on some javascript code which pushes a state to a javascripttobubble element:
function startUploaderMonitoring() {
let uploader = document.getElementById("multi-load");
if (!uploader) {
console.error(`[Monitor] Uploader with ID 'multi-load' not found.`);
return;
}
console.log(`[Monitor] Starting monitoring for 'multi-load'...`);
function isMultifileUploaderUploading() {
if (!uploader) return false;
console.log(`[Uploader Check] Checking status for 'multi-load'...`);
// 1️⃣ Check for temporary upload elements (Bubble may use these)
let tempUploadElements = uploader.querySelectorAll('.temporary, .uploading-indicator, .progress-bar');
if (tempUploadElements.length > 0) {
console.log(`[Uploader Check] Temporary upload elements detected -> Uploading`);
return true;
}
// 2️⃣ Check if the uploader has child elements that suggest files are in transition
let fileItems = uploader.querySelectorAll('[role="listitem"], .file-item, .dz-preview');
if (fileItems.length > 0) {
console.log(`[Uploader Check] File items exist -> Possibly uploading`);
return true;
}
// 3️⃣ Check if any child element is changing dynamically
let dynamicElements = uploader.querySelectorAll('*');
for (let elem of dynamicElements) {
if (window.getComputedStyle(elem).opacity < 1 || elem.style.visibility === "hidden") {
console.log(`[Uploader Check] Hidden or fading elements detected -> Uploading`);
return true;
}
}
console.log(`[Uploader Check] No uploading indicators found -> Not uploading`);
return false;
}
function updateBubbleUploaderState(uploading) {
if (typeof bubble_fn_uploader_busy === "function") {
console.log(`[Bubble] Posting to bubble_fn_uploader_busy: ${uploading}`);
bubble_fn_uploader_busy(uploading);
} else {
console.warn(`[Bubble] bubble_fn_uploader_busy is not defined.`);
}
}
// MutationObserver to detect changes
const observer = new MutationObserver((mutations) => {
console.log(`[Monitor] DOM changed, checking upload status...`);
let uploading = isMultifileUploaderUploading();
console.log(`[Monitor] Uploading: ${uploading}`);
updateBubbleUploaderState(uploading);
});
observer.observe(uploader, { attributes: true, childList: true, subtree: true });
// Store function to stop monitoring if needed
window.stopUploaderMonitoring = function () {
console.log(`[Monitor] Stopping monitoring for 'multi-load'`);
observer.disconnect();
};
}
My plugin Better Uploader makes this easy. There is an exposed stating for is Uploading which returns true when a file is being uploaded. There’s also an exposed state is Staging which returns true when the file that was selected is loading onto the webpage (sometimes large files take a little while to select before being able to be uploaded).
