Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-70947

File upload navigation warning not protecting all uploads and interacts with double-submit protection

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Atto Image:

      1. Start writing a new forum discussion and add something to all required form fields.
      2. Drag-and-drop a large image into atto (it probably helps to use your browser developer tools to throttle your connection.)
      3. Verify that the "Submit" button of the form is disabled.
      4. Now, wait for the file upload to complete. You should see the loading icon in the atto area will disappear.
      5. Verify that the "Submit" button of the form is enabled.
      6. Click the "Submit" button and Verify you are not prompted and that the form submits without error.

      File manager:

      1. Create an assignment in a course allowing file submissions.
      2. Log in as a student in the course, go to the assignment page.
      3. Open your browser's dev tools and in the network tab (chrome and firefox have this), you'll see a 'throttling' menu item near the right side. Set this to '3G' or the like, preferable as slow as you can set it.
      4. Now, drag a 1MB image file (or thereabouts in size) from your local filesystem to the submission area. Don't use the file selector dialogue.
      5. Verify that the "Submit" button of the form is disabled.
      6. Now, wait for the file upload to complete. You should see the file icon in the submission area and the grey bar will disappear.
      7. Verify that the "Submit" button of the form is enabled.
      8. Click the "Submit" button and Verify you are not prompted and that the form submits without error.
      Show
      Atto Image: Start writing a new forum discussion and add something to all required form fields. Drag-and-drop a large image into atto (it probably helps to use your browser developer tools to throttle your connection.) Verify that the "Submit" button of the form is disabled. Now, wait for the file upload to complete. You should see the loading icon in the atto area will disappear. Verify  that the "Submit" button of the form is enabled. Click the "Submit" button and Verify you are not prompted and that the form submits without error. File manager: Create an assignment in a course allowing file submissions. Log in as a student in the course, go to the assignment page. Open your browser's dev tools and in the network tab (chrome and firefox have this), you'll see a 'throttling' menu item near the right side. Set this to '3G' or the like, preferable as slow as you can set it. Now, drag a 1MB image file (or thereabouts in size) from your local filesystem to the submission area. Don't use the file selector dialogue. Verify that the "Submit" button of the form is disabled. Now, wait for the file upload to complete. You should see the file icon in the submission area and the grey bar will disappear. Verify  that the "Submit" button of the form is enabled. Click the "Submit" button and Verify you are not prompted and that the form submits without error.
    • Affected Branches:
      MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_310_STABLE, MOODLE_39_STABLE
    • Pull 3.9 Branch:
    • Pull 3.10 Branch:
      MDL-70947-310
    • Pull 3.11 Branch:
      MDL-70947-311
    • Pull Master Branch:
      MDL-70947-master

      Description

      Previously (MDL-62712) we implemented protection, so that if a file is in the middle of being up-loaded, you get a warning if you try to leave (e.g. submit the form) before the upload is complete.

      However, due to other changes, there are at least two problems with this:

      A) Not all uploads are protected. For example,

      1. Start writing a new forum discussion and add something to all required form fields.
      2. Drag-and-drop a large image into atto (it probably helps to use your browser developer tools to throttel your connection.)
      3. Before the upload is complete, click the Submit button.

      Actual result: the forum just stubmit.

      Expected result: you are warned.

      B) This protection interacts badly with the double-submit protection (MDL-38555).

      1. Go to a form with a file-manager (e.g. Question bank > Import)
      2. Fill in required fields.
      3. Drag a large file into the file manager.
      4. Click Submit.
      5. In the pop-up warning "Your responses have not been saved to the server ...", click cancel

      Expected result: once the upload completes, you can submit.

      Acutal result: you are suck on a form with a disabled button, and nothing you can do.


      Following a discussion between Huong and Tim, we think a solution might be.

      1. We should introduce custom events upload-started and upload-complete. (Does Moodle have a naming convention for this? tool_dataprivacy uses names like tool_dataprivacy-data_request:approve, so perhaps core_form-upload:start, core_form-upload:complete.)
      2. We should listen to those events in lib/form/amd/src/submit.js. This brings the two bits of code that were previsouly interacting badly close together, where the interaction is easier to understant). This event listener should implement the current onbeforeunload logic, but should also disable buttons during the upload (like Huong's first proposed solution.)
      3. We should improve the way buttons are disabled. We should only disable buttons that are currently enabled, and when we do, we should add an attribute like data-disabled-by-upload-protection="1". Then, when upload is complete, we should re-enable all the buttons with that data attribute, and remove the attributes.
      4. To help with event triggering, it might be useful to add helper methods triggerUploadStart() and triggerUploadComplete() in lib/form/amd/src/submit.js (I am not sure).
      5. Then ensure that all places where file uploads are hadled trigger the necessary events. That is, replace the two current reportUploadDirtyState functions with the new events, and add the events to atto_image and atto_filedragdrop.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              huongn@moodle.com Huong Nguyen
              Reporter:
              HuongNV Huong Nguyen
              Peer reviewer:
              Andrew Lyons Andrew Lyons
              Integrator:
              Jun Pataleta Jun Pataleta
              Tester:
              Anna Carissa Sadia Anna Carissa Sadia
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
              Votes:
              3 Vote for this issue
              Watchers:
              13 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                10/May/21

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 2 hours, 5 minutes
                  1d 2h 5m