Post_Save Processing when clicking upload in form won't show spinner or disable button.

[diabeatz96]

Issue Summary

Description:

When clicking the upload button in the Wagtail Media featured form under a or piece of content, there is no spinner displayed to indicate that the form is submitting when uploading a new video. This can cause confusion for users who are unsure if the form is submitting or not. I am using a post_save signal to identify the type of video and then convert to mp4. this processing takes some time, and upload button bugs waiting for my processing to finish.

Expected behavior:

A spinner should be displayed when the upload button is clicked to indicate that the form is submitting and processing.

Actual behavior:

No spinner is displayed when the upload button is clicked on a featured media form, allowing the user to click multiple times. This goes the same for the save button if editing an existing video.

However in upload page on media tab, this functionality IS correct initially, but then reverts to normal button if process takes too long.

Steps to Reproduce

1. Log in to the Wagtail admin interface.
2. Navigate to the page or model where you want to add a featured media.
3. Click on the "Edit" button to edit the page or model.
4. Scroll down to the "Featured media" section.
5. Click on the "Choose a media item" button.
6. Click on the "Upload" tab.
7. Click on the "Choose file" button to select the video file you want to upload.
8. Click on the "Upload" button to upload the video file.

Right here upload button does not change its state, my process is working, and converting, but you can click the button over and over again to keep spamming post save signal.

Technical details

py version 3.11 Django>=4.2,<4.3 wagtail>=5.0,<5.1 Version: 0.14.2 Browser: Chrome/Edge (not working in both)

[Followthevu]

I was reviewing this issue with @diabeatz96.

What I noticed is that this issue comes up with the "add video" tab when chooser.html form is served.

in chooser.html the button html code is: <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Uploading…' %}">{% icon name="spinner" %}<em>{% trans 'Upload' %}</em></button>

when i looked at the wagtail templates i noticed the button looked like the following: ` <button type="submit" class="button button-longrunning" data-controller="w-progress" data-action="w-progress#activate" data-w-progress-active-value="{% trans 'Uploading…' %}"

{% icon name="spinner" %} {% trans 'Upload' %} `

so as a workaround i copied the wagtailmedia templates folder into the project we were reviewing and I changed the code to match the button i found in the wagtail templates and that seemed to provide the greyed out and disabled feature of the button when it is clicked to upload a new file.

I do not have much experience creating contributions online and I am not sure what the ramifications are when i made changes to this buttons code in the chooser.

I'm hoping someone from the core dev team can take a gander at this.

[zerolab]

This should be fixed in v0.14.3