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

Add progress indicator to drag and drop file upload in filepicker

    Details

    • Testing Instructions:
      Hide

      As there are CSS changes, please make sure you clear the site / browser cache before testing.

      1. Open up a forum activity and start a new discussion
      2. Drag a file into the 'attachments' area
        1. check that the filename + progress bar is displayed as expected
        2. check the progress bars are hidden and the normal icon/thumbnail is shown once the upload is complete
      3. Drag 2 more files (at the same time) into the area
        1. check the filenames + progress bars are both shown
        2. check the progress bars are hidden and the normal icon/thumbnail is shown once the upload is complete
      4. Delete all the files - check the drag & drop message is displayed correctly
      5. Upload a file with a very long filename ( > 50 chars) - check the name is truncated properly
      6. Attempt to upload a file greater than the current filesize limit - check the uploaded files are redisplayed after the error message is dismissed
      7. Upload the same file twice, then cancel the 'overwrite / rename' dialog - check the uploaded files are redisplayed correctly
      8. Visit Site admin > users > upload users
      9. Drag and drop a file into the filepicker box
        1. Check the progress bars are displayed correctly
        2. Check the file is displayed correctly after the upload is complete
      10. Delete the file, then drag and drop a file that is greater than the filesize limit
        1. check the file display returns to normal after the error message is dismissed
      11. Visit a course page and turn editing on
      12. Drag and drop a file onto the course
      13. Make sure the styling of the progress bar has not been broken by the CSS changes

      Note - this will need testing in at least Firefox and Chrome. Preferably also IE10 (IE9 and below do not support drag and drop upload).
      On supported browsers, the progress bar should have rounded corners and a subtle drop shadow to the right of the internal green bar.

      Show
      As there are CSS changes, please make sure you clear the site / browser cache before testing. Open up a forum activity and start a new discussion Drag a file into the 'attachments' area check that the filename + progress bar is displayed as expected check the progress bars are hidden and the normal icon/thumbnail is shown once the upload is complete Drag 2 more files (at the same time) into the area check the filenames + progress bars are both shown check the progress bars are hidden and the normal icon/thumbnail is shown once the upload is complete Delete all the files - check the drag & drop message is displayed correctly Upload a file with a very long filename ( > 50 chars) - check the name is truncated properly Attempt to upload a file greater than the current filesize limit - check the uploaded files are redisplayed after the error message is dismissed Upload the same file twice, then cancel the 'overwrite / rename' dialog - check the uploaded files are redisplayed correctly Visit Site admin > users > upload users Drag and drop a file into the filepicker box Check the progress bars are displayed correctly Check the file is displayed correctly after the upload is complete Delete the file, then drag and drop a file that is greater than the filesize limit check the file display returns to normal after the error message is dismissed Visit a course page and turn editing on Drag and drop a file onto the course Make sure the styling of the progress bar has not been broken by the CSS changes Note - this will need testing in at least Firefox and Chrome. Preferably also IE10 (IE9 and below do not support drag and drop upload). On supported browsers, the progress bar should have rounded corners and a subtle drop shadow to the right of the internal green bar.
    • Affected Branches:
      MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_25_STABLE
    • Pull Master Branch:
      MDL-33688_dndupload_progress

      Description

      When using drag and drop to upload a large file, whether creating a resource via the "Add an activity or resource" link or uploading a backup file for restore, there is no progress indicator letting the user know if the operation is succeeding or failing. This can cause the user to conclude that he/she did not properly drag and drop the file, and repeat the drag and drop operation, or give up and navigate away from the page. A progress indicator would be a very helpful addition to the user interface.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Votes:
                  27 Vote for this issue
                  Watchers:
                  16 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    14/May/13