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

Make pasting images into the Atto HTML editor work (as much as browsers will let us)

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      This should be tested on all supported browsers, on all supported Operating systems, as far as relevant (e.g. you can't drag in image file on a mobile browser).

      So far I have tested Firefox, Chrome and Edge on Windows, which all seem to work.

      Before you start you need some image files (sample one attached).

      Test drag drop of one image

      1. Go to anywhere in Moodle that supports atto with a filepicker (e.g. start writing a forum post).
      2. Drag in the image file. (This was working before, but the code changed while impelementing this feature, so we are testing that there is no regression.)
      3. Verify that you see the progress indicator while the file uploads, and then the image appears.
      4. Click the View source button ( <> ).
      5. Verify that this the image has a URL including 'draftfile.php'.

      Test drag drop of multiple images

      (This did not work before, but it does now )

      1. Select several image files on your computer, and drag them into the editor.
      2. Verify that you multiple progress spinners, one for each image, and then all the images appear.
      3. Select some image files, and some non-image files on your computer, and drag them into the editor.
      4. Verify that the images get uploaded, and the other files get ignored.

      Test pasting images

      This is what you have been waiting for!

      1. Open the image in some program where you can copy it. E.g. open it in your Operating system's photo viewer, and copy the image to the clipboard, or take a screen-grab onto the clipboard.
      2. Paste into Atto.
      3. Verify that you see the progress indicator while the file uploads, and then the image appears.
      4. Click the View source button ( <> ).
      5. Verify that this the image has a URL including 'draftfile.php'.
      Show
      This should be tested on all supported browsers, on all supported Operating systems, as far as relevant (e.g. you can't drag in image file on a mobile browser). So far I have tested Firefox, Chrome and Edge on Windows, which all seem to work. Before you start you need some image files (sample one attached). Test drag drop of one image Go to anywhere in Moodle that supports atto with a filepicker (e.g. start writing a forum post). Drag in the image file. (This was working before, but the code changed while impelementing this feature, so we are testing that there is no regression.) Verify that you see the progress indicator while the file uploads, and then the image appears. Click the View source button ( <> ). Verify that this the image has a URL including 'draftfile.php'. Test drag drop of multiple images (This did not work before, but it does now ) Select several image files on your computer, and drag them into the editor. Verify that you multiple progress spinners, one for each image, and then all the images appear. Select some image files, and some non-image files on your computer, and drag them into the editor. Verify that the images get uploaded, and the other files get ignored. Test pasting images This is what you have been waiting for! Open the image in some program where you can copy it. E.g. open it in your Operating system's photo viewer, and copy the image to the clipboard, or take a screen-grab onto the clipboard. Paste into Atto. Verify that you see the progress indicator while the file uploads, and then the image appears. Click the View source button ( <> ). Verify that this the image has a URL including 'draftfile.php'.
    • Affected Branches:
      MOODLE_27_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull Master Branch:

      Description

      Google Docs, GMail and some other mail clients have started allowing users to copy images from a desktop program (paint / powerpoint / word / gimp / fireworks etc...) and paste them directly into the text editor without having to manually save the file and upload it. The same feature would be really useful in moodle.

      Use case:
      User copies an image into their clipboard
      User writes some text into the text editor (e.g. label / web page) in moodle and presses Ctrl + V to paste the image.
      The image should upload to the personal files area and be inserted into the text editor.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              timhunt Tim Hunt
              Reporter:
              pddring Pete Dring
              Peer reviewer:
              Mihail Geshoski
              Integrator:
              Jake Dallimore
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              22 Vote for this issue
              Watchers:
              34 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                8/Jun/20

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 5 hours, 30 minutes
                  5h 30m