fix: Disable file buttons when actions in progress

openassessment/__init__.py

@@ -2,4 +2,4 @@
 Initialization Information for Open Assessment Module
 """
 
-__version__ = '6.16.4'
+__version__ = '6.16.5'

openassessment/xblock/static/dist/manifest.json

@@ -4,18 +4,18 @@
   "openassessment-editor-textarea.js.map": "/openassessment-editor-textarea.cbb31e4372be87d437fb.js.map",
   "openassessment-editor-tinymce.js": "/openassessment-editor-tinymce.2a1e66e98a2a1132f633.js",
   "openassessment-editor-tinymce.js.map": "/openassessment-editor-tinymce.2a1e66e98a2a1132f633.js.map",
-  "openassessment-lms.css": "/openassessment-lms.42bdf01af5d117224bc9.css",
-  "openassessment-lms.js": "/openassessment-lms.42bdf01af5d117224bc9.js",
-  "openassessment-lms.css.map": "/openassessment-lms.42bdf01af5d117224bc9.css.map",
-  "openassessment-lms.js.map": "/openassessment-lms.42bdf01af5d117224bc9.js.map",
-  "openassessment-ltr.css": "/openassessment-ltr.0c6318822d5661f0f9ea.css",
-  "openassessment-ltr.js": "/openassessment-ltr.0c6318822d5661f0f9ea.js",
-  "openassessment-ltr.css.map": "/openassessment-ltr.0c6318822d5661f0f9ea.css.map",
-  "openassessment-ltr.js.map": "/openassessment-ltr.0c6318822d5661f0f9ea.js.map",
-  "openassessment-rtl.css": "/openassessment-rtl.c938e1614108d8feb891.css",
-  "openassessment-rtl.js": "/openassessment-rtl.c938e1614108d8feb891.js",
-  "openassessment-rtl.css.map": "/openassessment-rtl.c938e1614108d8feb891.css.map",
-  "openassessment-rtl.js.map": "/openassessment-rtl.c938e1614108d8feb891.js.map",
+  "openassessment-lms.css": "/openassessment-lms.3b32189187e8e2d3e0c3.css",
+  "openassessment-lms.js": "/openassessment-lms.3b32189187e8e2d3e0c3.js",
+  "openassessment-lms.css.map": "/openassessment-lms.3b32189187e8e2d3e0c3.css.map",
+  "openassessment-lms.js.map": "/openassessment-lms.3b32189187e8e2d3e0c3.js.map",
+  "openassessment-ltr.css": "/openassessment-ltr.97990de9668aaa4cd1d5.css",
+  "openassessment-ltr.js": "/openassessment-ltr.97990de9668aaa4cd1d5.js",
+  "openassessment-ltr.css.map": "/openassessment-ltr.97990de9668aaa4cd1d5.css.map",
+  "openassessment-ltr.js.map": "/openassessment-ltr.97990de9668aaa4cd1d5.js.map",
+  "openassessment-rtl.css": "/openassessment-rtl.19576ab9f81f644cb7fd.css",
+  "openassessment-rtl.js": "/openassessment-rtl.19576ab9f81f644cb7fd.js",
+  "openassessment-rtl.css.map": "/openassessment-rtl.19576ab9f81f644cb7fd.css.map",
+  "openassessment-rtl.js.map": "/openassessment-rtl.19576ab9f81f644cb7fd.js.map",
   "openassessment-studio.js": "/openassessment-studio.b58bb4e55f63dadac6de.js",
   "openassessment-studio.js.map": "/openassessment-studio.b58bb4e55f63dadac6de.js.map",
   "fallback-default.png": "/4620b30a966533ace489dcc7afb151b9.png",

openassessment/xblock/static/js/src/lms/oa_response.js

@@ -159,22 +159,26 @@ export class ResponseView {
 
       const uploadButton = sel.find('.file__upload');
       const spinner = sel.find('.fa-spinner');
+
       // Install a click handler for the save button
       uploadButton.click(
         (eventObject) => {
           // Override default form submission
           eventObject.preventDefault();
           $('.submission__answer__display__file', view.element).removeClass('is--hidden');
-          uploadButton.prop('disabled', true);
+          view.disableFields();
           spinner.removeClass('is--hidden');
           if (view.hasAllUploadFiles()) {
             const promise = view.uploadFiles();
             promise.then(() => {
-              uploadButton.prop('disabled', false);
+              view.enableFields();
               spinner.addClass('is--hidden');
+              // Reset the internal files state once upload is complete,
+              // to avoid the files being processed again if the user clicks upload again.
+              this.files = null;
             });
           } else {
-            uploadButton.prop('disabled', false);
+            view.enableFields();
             spinner.addClass('is--hidden');
           }
         },
@@ -307,6 +311,32 @@ export class ResponseView {
       return this.baseView.buttonEnabled('.step--response__submit', enabled);
     }
 
+    /**
+     * Disable the fields to avoid any changes while an action is processing.
+     * For example, use this when beginning a file upload, or submitting the response.
+     */
+    disableFields() {
+      this.submitEnabled(false);
+
+      const responseEl = $('.step--response', this.element);
+      responseEl.find('.file__upload').prop('disabled', true);
+      responseEl.find('.delete__uploaded__file').prop('disabled', true);
+      responseEl.find('.submission__answer__upload').prop('disabled', true);
+    }
+
+    /**
+     * Enable the fields to allow changes again.
+     * Use this to revert the changes made by `disableFields()`.
+     */
+    enableFields() {
+      this.submitEnabled(true);
+
+      const responseEl = $('.step--response', this.element);
+      responseEl.find('.file__upload').prop('disabled', false);
+      responseEl.find('.delete__uploaded__file').prop('disabled', false);
+      responseEl.find('.submission__answer__upload').prop('disabled', false);
+    }
+
     /**
      Enable/disable the preview button.
      Check whether the preview button is enabled.
@@ -523,8 +553,9 @@ export class ResponseView {
     handleSubmitClicked() {
       if (!this.isValidForSubmit()) { return; }
 
-      // Immediately disable the submit button to prevent multiple submission
-      this.submitEnabled(false);
+      // Immediately disable the submit button to prevent multiple submission,
+      // and other form fields to avoid race conditions if anything changes.
+      this.disableFields();
 
       const view = this;
       const title = gettext('Confirm Submit Response');
@@ -547,7 +578,7 @@ export class ResponseView {
         title,
         msg,
         () => view.submit(),
-        () => view.submitEnabled(true),
+        () => view.enableFields(),
       );
     }
 
@@ -568,8 +599,8 @@ export class ResponseView {
             // If there is an error message, display it
             if (errMsg) { this.baseView.toggleActionError('submit', errMsg); }
 
-            // Re-enable the submit button so the user can retry
-            this.submitEnabled(true);
+            // Re-enable the submit button and the rest of the form so the user can retry
+            this.enableFields();
           }
         });
     }
@@ -840,20 +871,23 @@ export class ResponseView {
     */
    handleDeleteFileClick(target) {
      const view = this;
+     this.disableFields();
      const filenum = $(target).attr('filenum');
      this.confirmationDialog.confirm(
        gettext('Confirm Delete Uploaded File'),
        this.getConfirmRemoveUploadedFileMessage(filenum),
-       () => view.removeUploadedFile(filenum),
-       () => {},
+       () => view.removeUploadedFile(filenum).always(() => view.enableFields()),
+       () => view.enableFields(),
      );
    }
 
    /**
      Remove a previously uploaded file.
+
+     Returns a jQuery promise that resolves once the process is complete.
      */
    removeUploadedFile(filenum) {
-     this.server.removeUploadedFile(filenum).done(() => {
+     return this.server.removeUploadedFile(filenum).done(() => {
        const sel = $('.step--response', this.element);
        const block = sel.find(`.submission__answer__file__block__${filenum}`);
        block.html('');

openassessment/xblock/static/js/src/lms/oa_staff_area.js

@@ -472,8 +472,8 @@ export class StaffAreaView {
      *   bool: Whether the button is enabled.
      *
      * Examples:
-     * >> view.submitEnabled(true);  // enable the button
-     * >> view.submitEnabled();  // check whether the button is enabled
+     * >> view.cancelSubmissionEnabled(true);  // enable the button
+     * >> view.cancelSubmissionEnabled();  // check whether the button is enabled
      * >> true
      */
     cancelSubmissionEnabled(enabled) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "edx-ora2",
-  "version": "6.16.3",
+  "version": "6.16.5",
   "repository": "https://github.com/openedx/edx-ora2.git",
   "dependencies": {
     "@edx/frontend-build": "8.0.6",