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
    • Rank:
      41686

      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.

      1. Drag and drop backup.mov
        281 kB
        Dean Thayer
      2. Drag and drop resource.mov
        1.70 MB
        Dean Thayer

        Issue Links

          Activity

          Hide
          Michael de Raadt added a comment -

          Thanks for suggesting that.

          There is a progress indicator when files are dropped on the course page, so I suppose you're talking about dropping a file on a filemanager input in a form. Is that correct?

          Show
          Michael de Raadt added a comment - Thanks for suggesting that. There is a progress indicator when files are dropped on the course page, so I suppose you're talking about dropping a file on a filemanager input in a form. Is that correct?
          Hide
          Dean Thayer added a comment -

          Correct. The situation is better when adding a resource than it is when restoring a backup because there is an hourglass from the OS. There is really nothing to let you know that something is happening when uploading a backup file. I am attaching some screencasts to demonstrate my experience on MacOS 10.7.4.

          Show
          Dean Thayer added a comment - Correct. The situation is better when adding a resource than it is when restoring a backup because there is an hourglass from the OS. There is really nothing to let you know that something is happening when uploading a backup file. I am attaching some screencasts to demonstrate my experience on MacOS 10.7.4.
          Hide
          Dean Thayer added a comment - - edited

          The problem may be further complicated by MDL-32513 because users can erroneously conclude that the file needs to be dragged and dropped again, resulting in multiple file uploads with automatically renamed files.

          Show
          Dean Thayer added a comment - - edited The problem may be further complicated by MDL-32513 because users can erroneously conclude that the file needs to be dragged and dropped again, resulting in multiple file uploads with automatically renamed files.
          Hide
          Michael de Raadt added a comment -

          Thanks for providing the additional details.

          Show
          Michael de Raadt added a comment - Thanks for providing the additional details.
          Hide
          Nadav Kavalerchik added a comment -

          +1 from me for fixing this issue.
          Teachers i work with keep asking me about this. they have no indication an upload started and they keep uploading (dragging) files over and over again.

          Show
          Nadav Kavalerchik added a comment - +1 from me for fixing this issue. Teachers i work with keep asking me about this. they have no indication an upload started and they keep uploading (dragging) files over and over again.
          Hide
          Andrea Bicciolo added a comment -

          Hi Michael,
          this issue is affecting most of 2.3 installations, lot of users perform exactly the steps reported in the issue Description as they think upload is failing or not working at all, not to mention their surprise when they are prompted to overwrite or rename a file they think has not been uploaded.

          Hope this issue can be prioritized in some way. Thanks!

          Show
          Andrea Bicciolo added a comment - Hi Michael, this issue is affecting most of 2.3 installations, lot of users perform exactly the steps reported in the issue Description as they think upload is failing or not working at all, not to mention their surprise when they are prompted to overwrite or rename a file they think has not been uploaded. Hope this issue can be prioritized in some way. Thanks!
          Hide
          Derek Chirnside added a comment -

          There is a progress indicator in Chrome. I wonder if there is a plugin for Firefox to do this?

          Regarding the duplicate file upload: every new user here does this a lot before they figure out what is going as Dean describes. I'd really like something to happen with this.
          My +1

          -Derek

          Show
          Derek Chirnside added a comment - There is a progress indicator in Chrome. I wonder if there is a plugin for Firefox to do this? Regarding the duplicate file upload: every new user here does this a lot before they figure out what is going as Dean describes. I'd really like something to happen with this. My +1 -Derek
          Hide
          Marina Glancy added a comment -

          Hi Davo,
          this looks like a very voted for issue. Do you think you can take a look at it in the close future?
          Marina

          Show
          Marina Glancy added a comment - Hi Davo, this looks like a very voted for issue. Do you think you can take a look at it in the close future? Marina
          Hide
          Davo Smith added a comment -

          I'm unlikely to have a chance to look at this this week, but maybe next week.

          Show
          Davo Smith added a comment - I'm unlikely to have a chance to look at this this week, but maybe next week.
          Hide
          Davo Smith added a comment -

          I did have a bit of time today after all.

          Here is a work in progress patch - the filemanager works fine (although a bit of work on the CSS of the progress bars might be nice), the filepicker is broken, so not yet ready for integration.

          Show
          Davo Smith added a comment - I did have a bit of time today after all. Here is a work in progress patch - the filemanager works fine (although a bit of work on the CSS of the progress bars might be nice), the filepicker is broken, so not yet ready for integration.
          Hide
          Davo Smith added a comment -

          The code now works with filepicker elements as well as filemanager elements.

          I've added an optional 3rd commit, which improves the progress bar styling a little with a background image on the bar, curved corners (for browsers that support them) and a subtle shadow inside the progress bar. This affects the styling of the progress bars on the course pages as well (as I've used the same CSS class). I'm quite happy to lose this commit, but I happen to like it ...

          Show
          Davo Smith added a comment - The code now works with filepicker elements as well as filemanager elements. I've added an optional 3rd commit, which improves the progress bar styling a little with a background image on the bar, curved corners (for browsers that support them) and a subtle shadow inside the progress bar. This affects the styling of the progress bars on the course pages as well (as I've used the same CSS class). I'm quite happy to lose this commit, but I happen to like it ...
          Hide
          Davo Smith added a comment -

          Small extra commit - I realised that the filemanager display was ending up blank if the upload was cancelled in any way (e.g. file too big, too many files, cancelling the 'overwrite/rename' dialog). This should now be fixed.

          Show
          Davo Smith added a comment - Small extra commit - I realised that the filemanager display was ending up blank if the upload was cancelled in any way (e.g. file too big, too many files, cancelling the 'overwrite/rename' dialog). This should now be fixed.
          Hide
          Andrew Nicols added a comment -

          If you could merge into one commit that would be great

          [N] Syntax
          [Y] Output
          [Y] Whitespace
          [-] Language
          [-] Databases
          [N] Testing
          [-] Security
          [-] Documentation
          [N] Git
          [Y] Sanity check

          Syntax

          Nothing major here - just what jshint has pulled up relating to these changes.
          lib/form/dndupload.js:

          • Line 437 update_progress function should use === on undefined test
          • Line 450 Missing closing semicolon

          Testing

          Just need some testing instructions here

          Git

          Could you squash these commits into a single commit

          Feel free to submit for integration when ready.

          Show
          Andrew Nicols added a comment - If you could merge into one commit that would be great [N] Syntax [Y] Output [Y] Whitespace [-] Language [-] Databases [N] Testing [-] Security [-] Documentation [N] Git [Y] Sanity check Syntax Nothing major here - just what jshint has pulled up relating to these changes. lib/form/dndupload.js: Line 437 update_progress function should use === on undefined test Line 450 Missing closing semicolon Testing Just need some testing instructions here Git Could you squash these commits into a single commit Feel free to submit for integration when ready.
          Hide
          Davo Smith added a comment -

          I've squashed the commits and force pushed them over the top of the original branch.
          I've also fixed the two highlighted javascript errors and will add testing instructions in just a moment

          Show
          Davo Smith added a comment - I've squashed the commits and force pushed them over the top of the original branch. I've also fixed the two highlighted javascript errors and will add testing instructions in just a moment
          Hide
          Andrew Nicols added a comment -

          Cheers - sorry it took me so long to get to Peer Review!

          Show
          Andrew Nicols added a comment - Cheers - sorry it took me so long to get to Peer Review!
          Hide
          Dan Poltawski added a comment -

          Great work Davo!

          Integrated to master.

          Its currently blocked from testing by a regression in MDL-36708, however for testing purposes I reverted that and tested on Chrome, firefox, Safari and IE10. Looks great!

          Show
          Dan Poltawski added a comment - Great work Davo! Integrated to master. Its currently blocked from testing by a regression in MDL-36708 , however for testing purposes I reverted that and tested on Chrome, firefox, Safari and IE10. Looks great!
          Hide
          Dan Poltawski added a comment -

          Hurray! We did it! Thanks to all the reporters, testers, user and watchers for a bumper week of Moodling!

          Show
          Dan Poltawski added a comment - Hurray! We did it! Thanks to all the reporters, testers, user and watchers for a bumper week of Moodling!
          Hide
          Derek Chirnside added a comment -

          Puzzled. Why is this not in the latest 2.4?
          -Derek

          Show
          Derek Chirnside added a comment - Puzzled. Why is this not in the latest 2.4? -Derek
          Hide
          Dan Poltawski added a comment -

          Derek, it is an improvement and we try and minimise the chance of regressions by implementing these only on the dev branch. Please see our backporting policy: http://docs.moodle.org/dev/Integration_Review#Backporting

          Show
          Dan Poltawski added a comment - Derek, it is an improvement and we try and minimise the chance of regressions by implementing these only on the dev branch. Please see our backporting policy: http://docs.moodle.org/dev/Integration_Review#Backporting
          Hide
          Derek Chirnside added a comment -

          OK Dan, thanks, I saw (misread) 2.3 and 2.5 and assumed it was in 2.4. I had just upgraded yesterday and was looking for this.
          -Derek

          Show
          Derek Chirnside added a comment - OK Dan, thanks, I saw (misread) 2.3 and 2.5 and assumed it was in 2.4. I had just upgraded yesterday and was looking for this. -Derek

            People

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

              Dates

              • Created:
                Updated:
                Resolved: