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

Javascript: Create core/dropzone module to handle dropzone

XMLWordPrintable

    • MOODLE_404_STABLE
    • MOODLE_404_STABLE
    • MDL-80850-main
    • Hide

      Initial setup

      1. Download and put testdropzone.php file into your Moodle root folder.
      2. Login as admin.

      Drag-drop test

      1. Turn on the Browser developer tool.
      2. Switch to the Console tab.
      3. Navigate to [Moodle-URL]/testdropzone.php
      4. Verify that you will see a log called: Dropzone has been initialized!
      5. Verify that you will see Test dropzone page heading.
      6. Verify that you will see a Dropzone below the heading. (Like the attached image).
      7. Drag a file from your machine over the dropzone - Do not drop it.
      8. Verify that the dropzone border color will be changed to blue.
      9. Drag the file out of the dropzone.
      10. Verify that the dropzone border colour will be changed back to grey.
      11. Drop the file inside the dropzone.
      12. Verify that you will see the FileList object in the Console tab.
      13. Expand that FileList.
      14. Verify that you will see the dropped file's name and size.
      15. Move the mouse around the dropzone.
      16. Verify that the cursor is the hand one.
      17. Click anywhere inside the dropzone.
      18. Verify that the OS Finder will be opened to let you select a file.
      19. Select a file to upload.
      20. Verify that you will see the FileList object in the Console tab.
      21. Expand that FileList.
      22. Verify that you will see the selected file's name and size.

      Accessibility test

      1. Click on Test dropzone page heading to focus on that place.
      2. Press the Tab key.
      3. Verify that you will see Add files...
      4. Verify that the Add files... element is focused.
      5. Press the Enter key.
      6. Verify that the OS Finder will be opened to let you select a file.
      7. Select a file to upload.
      8. Verify that you will see the FileList object in the Console tab.
      9. Expand that FileList.
      10. Verify that you will see the selected file's name and size.
      Show
      Initial setup Download and put testdropzone.php file into your Moodle root folder. Login as admin. Drag-drop test Turn on the Browser developer tool. Switch to the Console tab. Navigate to [Moodle-URL] /testdropzone.php Verify that you will see a log called: Dropzone has been initialized! Verify that you will see Test dropzone page heading. Verify that you will see a Dropzone below the heading. (Like the attached image). Drag a file from your machine over the dropzone - Do not drop it . Verify that the dropzone border color will be changed to blue . Drag the file out of the dropzone. Verify that the dropzone border colour will be changed back to grey . Drop the file inside the dropzone. Verify that you will see the FileList object in the Console tab. Expand that FileList. Verify that you will see the dropped file's name and size . Move the mouse around the dropzone. Verify that the cursor is the hand one. Click anywhere inside the dropzone. Verify that the OS Finder will be opened to let you select a file. Select a file to upload. Verify that you will see the FileList object in the Console tab. Expand that FileList. Verify that you will see the selected file's name and size . Accessibility test Click on Test dropzone page heading to focus on that place. Press the Tab key. Verify that you will see Add files... Verify that the Add files... element is focused . Press the Enter key. Verify that the OS Finder will be opened to let you select a file. Select a file to upload. Verify that you will see the FileList object in the Console tab. Expand that FileList. Verify that you will see the selected file's name and size .
    • 6
    • Team Hedgehog 2024 Sprint 1.1, Team Hedgehog 2024 Sprint 1.2, Team Hedgehog 2024 Sprint 1.3

      We currently have several places supporting drop to upload feature, such as the Course home page and File Manager.

      However, each component needs to implement its module, UI and logic.

      This tracker is created to implement a core/dropzone module to handle the dropzone and drop to upload operations, including the UI for the dropzone.

      This module is reusable so it will help MDL-78096 and MDL-78428.

        1. dropzone_accessibility.png
          dropzone_accessibility.png
          109 kB
        2. dropzone.png
          dropzone.png
          84 kB
        3. MDL-80850_Test.png
          MDL-80850_Test.png
          114 kB
        4. MDL-80850-accessibility test.png
          MDL-80850-accessibility test.png
          980 kB
        5. MDL-80850-drag-drop test.png
          MDL-80850-drag-drop test.png
          1.53 MB
        6. testdropzone.php
          2 kB

            huongn@moodle.com Huong Nguyen
            huongn@moodle.com Huong Nguyen
            Raquel Ortega Raquel Ortega
            Ilya Tregubov Ilya Tregubov
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 days, 6 hours, 28 minutes
                2d 6h 28m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.