Currently if you want to upload an image to a file document you will most likely use the image-uploader widget, but with slower internet (3-4g on mobile devices) uploading can take a few seconds. The widget itself shows a non blocking progress bar, which means the user can still press buttons, go to different pages etc, which can result in errors with committing the image. I think it would be good if there was an option in the widget to make this progress bar blocking to prevent users from getting an error.
For now we have a workaround where we use a HTMLsnippet that runs javascript with jquery to if a non blocking progress bar is present, a blocking underlay is added.
$(document).ready(function() {
let interval = setInterval(function() {
// Check if div with class "mx-progress mx-progress-empty" exists
let targetDiv = $('.mx-progress.mx-progress-empty');
if (targetDiv.length > 0) {
// If not already added, append the mx-underlay div to the parent
targetDiv.each(function() {
let parent = $(this).parent();
if (parent.find('.mx-underlay').length === 0) {
parent.append('<div class="mx-underlay"></div>');
}
});
} else {
// Remove the mx-underlay div if mx-progress mx-progress-empty is not found
$('.mx-underlay').remove();
}
}, 500); // Run every 500ms
});