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

              Hide
              salvetore 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
              salvetore 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
              deanthayer 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
              deanthayer 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
              deanthayer 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
              deanthayer 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
              salvetore Michael de Raadt added a comment -

              Thanks for providing the additional details.

              Show
              salvetore Michael de Raadt added a comment - Thanks for providing the additional details.
              Hide
              nadavkav 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
              nadavkav 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
              andreabix 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
              andreabix 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
              derekcx 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
              derekcx 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 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 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
              davosmith Davo Smith added a comment -

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

              Show
              davosmith Davo Smith added a comment - I'm unlikely to have a chance to look at this this week, but maybe next week.
              Hide
              davosmith 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
              davosmith 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
              davosmith 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
              davosmith 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
              davosmith 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
              davosmith 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
              dobedobedoh 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
              dobedobedoh 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
              davosmith 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
              davosmith 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
              dobedobedoh Andrew Nicols added a comment -

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

              Show
              dobedobedoh Andrew Nicols added a comment - Cheers - sorry it took me so long to get to Peer Review!
              Hide
              poltawski 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
              poltawski 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
              poltawski 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
              poltawski 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
              derekcx Derek Chirnside added a comment -

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

              Show
              derekcx Derek Chirnside added a comment - Puzzled. Why is this not in the latest 2.4? -Derek
              Hide
              poltawski 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
              poltawski 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
              derekcx 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
              derekcx 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
              Hide
              rajeshtaneja Rajesh Taneja added a comment -

              MDLQA-1720 has been updated to test progress bar update.

              Show
              rajeshtaneja Rajesh Taneja added a comment - MDLQA-1720 has been updated to test progress bar update.

                People

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

                  Dates

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