RCE Drag and Drop

dlyons · ‎11-23-2022

Product Blog Headers -- 1200 x 200.png

Getting media (Images, Documents, and Audio/Video) into the Rich Content Editor is pretty easy. Click Upload, drag and drop your file, click Submit, and you're done! Three steps isn't bad. But...

Screen Shot 2022-11-23 at 3.10.51 PM.png

The RCE now supports drag and drop (and copy/paste) of media directly. That means you can:

Drag and drop media from your desktop directly into the RCE and have it automatically uploaded to your Files.
Copy and paste media directly into the RCE and have it automatically upload to your Files.
Drag and drop or Copy and paste images from the web and have them automatically link to the source.

Check out this short video to see it in action.

(view in My Videos)

This improvement is rolling out to the RCE now, so keep your eye on the Deploy Notes to see when it will be available.

BethCrook · ‎11-28-2022

Any time there's less clicks, WIN!! This is fantastic, thank you! 🥳 🙌🏻 🎉 🍾 🕺🏻

aeseibert5 · ‎11-28-2022

Does this feature recognize when a file as already been uploaded to a course? Just curious, so I can avoid accidentally uploading duplicate files.

RyanSobeck · ‎11-28-2022

Does the drag and drop / copy and paste functionality only work with media files, or can a user do this also for things like Word, PDF, and other types of files?

I know the examples say media files, but didn't see anything specifically saying these other files types don't / won't work the same way.

eschiebel · ‎11-28-2022

@aeseibert5 , no it does not recognize when a file has already been uploaded.

eschiebel · ‎11-28-2022

@RyanSobeck you can copy/paste any type of file. Images and other media are an interesting case because you can right-click and copy while viewing them which is something not typically possible with other file types. Any file can be copied or drag-and-dropped from your file system using the Windows Explorer or Mac finder.

Hildi_Pardo · ‎11-30-2022

@eschiebel if duplicate files are uploaded, and it does not warn you, I assume the file gets renamed with a 1 or 2 at the end?

Another question: will they get alerted to add Alt Text when adding via drag and drop? (and alerted to add to a specific folder?)

This new feature is a great time saver! (will need to share more info or provide some training regarding some of the details)

thanks!

eschiebel · ‎12-01-2022

@Hildi_Pardo Yes, pasting or drag-and-dropping a file renames the file just like if you used the Upload File feature from the toolbar.

Since you don't have an opportunity to specify an alt text when pasting or dropping, Canvas will set it to the file name which is an accessibility issue. You will see 1 added to the A11Y Checker's issue count in the blue badge within the Rich Content Editor's status bar.

A11y Checker badge.png

dlyons · ‎12-02-2022

@RyanSobeck I've updated the video to show images, files, and video all working with drag and drop. 👍

dbrace · ‎12-02-2022

At the account-level, admins have the ability to "Disable uploads to Canvas Media from the enhanced rich content editor". This is helpful if an institution subscribes to a video hosting platform (such as Canvas Studio or Panopto or Kaltura) because we are paying for it and want to use it to its fullest.

When attempting to drag-and-drop video files, is this setting recognized or ignored?

I know that currently there are work arounds for the way the setting is implemented and I am trying to understand how it will be with this enhancement.

dbrace · ‎12-02-2022

Will drag-and-drop functionality work in the Canvas Inbox?

I know that 2022-12-17 is when the Inbox Refactor update will be released so I am technically asking this question two times

one-time for on 2022-12-07 when this is released
a second-time for on 2022-12-17 when the Inbox update is released

***** UPDATE: Per https://community.canvaslms.com/t5/The-Product-Blog/Canvas-Inbox-Refactor-Update-11-22-2022-amp-12-8..., the Inbox Refactor update is now delayed until 1/21/2023. *****

kimberly_ellis · ‎12-02-2022

SUCH A BIG DEAL!!! 👏🏼🕺🏻🎉🤩

dlyons · ‎12-03-2022

@dbrace the ways files are attached to Inbox messages will not change at this time. The Inbox uses a different paradigm from content creation in a course (i.e. on a Canvas Page.) This could always change in the future, but there are no plans currently.

Sylvia_Ami · ‎12-05-2022

WOW, Santa came early🎄🎅

Never say that the folks at Instructure don't keep track of Idea Conversations. The idea to Paste Images into Canvas was submitted back in 2015 by @blomas and the idea to Paste a photo into the RCE was submitted in 2020 by @troy120 .

I just tested this in Beta and it works great. I tried it with jpg, video, PDF, and PPT. I even could click on an image in my browser and drag it into the RCE. This is crazy-talk!!!!! Pinch me.🤣

Check it out @cchapman ! It's here!

tarapierce · ‎12-06-2022

Does this feature work in the Stimulus within the New Quizzes? Copy/Paste works; however, I cannot drag and drop a file.

RyanSobeck · ‎12-06-2022

@dlyons thanks for the updated video demonstrating all the different types of drag and drop. Also, always appreciate the video you chose to upload in your example.

cchapman · ‎12-06-2022

Crazy talk BFF @Sylvia_Ami ! This is AMAZING! I thank you so much for your dedication to keeping us informed! xo

sbj · ‎12-07-2022

@eschiebel this is not true:

"Since you don't have an opportunity to specify an alt text when pasting or dropping, Canvas will set it to the file name which is an accessibility issue. You will see 1 added to the A11Y Checker's issue count in the blue badge within the Rich Content Editor's status bar."

The video above shows (and I have confirmed in beta) that the "image options" box is fully functional with this feature, and the field for alt text is at the top. It would be really helpful if this video was redone showing correct use of alt text.

This feature is being promoted as reducing the number of steps needed, which is great, but then you are saying add another steps to make it accessible. Not cool. Adding alt text should be part of the initial image creation process. Putting a file name in that field is a major step back to the way Canvas behaved in its first days. Instructure folks, please show the extra 5 seconds it would take to make this image accessible.

dlyons · ‎12-08-2022

Update: we've disabled this feature in production temporarily while we fix a bug with pasting content copied from Microsoft Word files. We will push a fix to beta in the next day or two so it can be tested, and you can watch the release notes space for timing on when it will be re-enabled in production.

Sylvia_Ami · ‎12-08-2022

@dlyonsThanks for the update. I appreciate that you are delaying the release in order to fully test it. I'd rather have a new feature later on and fully tested than sooner and buggy. 🙄

jlee16 · ‎12-09-2022

@dbrace We have also disabled uploads to Canvas Media from our RCE, but when I tested drag-and-drop in Beta, it indeed placed my video in course files instead of my Studio account.

@dlyons This feature would be much more useful if we could specify a location for uploaded media in the account. We don't have enough storage in our courses for most media, as we bought Studio for that.

dlyons · ‎12-09-2022

@jlee16 you may have tested before the bugfix was deployed; when I just tried to drag and drop a video into an instance with Media Uploads disabled it did not work for me. Can you try again and let me know if you still see it sneaking in? As for selecting an upload destination for videos going to third parties; it's an interesting idea for sure!

DezeraeBrewer · ‎12-10-2022

Thank you for your share

IanGoh · ‎12-21-2022

We just opened a case

RCE Drag and Drop causing Mac/Chrome to copy and paste Word text as image (Case 09404578)

Several of us have been able to replicate an issue after the 12/20 deploy.

On a Mac, if you copy and paste text for a Word document using the Chrome 108 browser into the RCE, it pastes as an image.
Works fine with Firefox (108.0.1) on the same mac/word.
Works fine with Chrome 108 on Windows 10.

chriscas · ‎12-21-2022

Hi @dlyons,

I can confirm the behavior @IanGoh is reporting with my macOS 13.1 system and the latest version of Microsoft Edge (Chrome-based) too. Actually it's even worse... Drag and drop from word to the browser doesn't seem to do anything, but cmd+c and cmd+v end up pasting in an image of text into the RCE instead of the text itself. This was not the case a few weeks ago when I originally tested the feature, so perhaps whatever fix was put in place around Word ended up breaking this.

-Chris

Sylvia_Ami · ‎01-05-2023

As I understood this feature, we would only be able to drag/drop Word files, not text from an open Word doc. Did I miss something?

@dlyonsWhen this feature is deployed, I hope that the help guides mention that the default setting for files will be Display Options: Preview in overlay. That's how it works when I drag/drop files in Beta.

eschiebel · ‎01-30-2023

@sylvie you can drag and drop any file and canvas will upload it then if it's an image, display the image or if it's any other type of file link to it.

For text-ish documents like Word, you can copy their contents and paste into the RCE. Canvas will respect the structure (headings will be headings and lists will be lists etc.), but most styling will be lost.

I hope this helps.

eschiebel · ‎01-30-2023

Everyone,

Thank you for being patient as we work through the dark corners of copying and pasting Word content. The fix is in beta where you can test it out (please holler if you see issues) and should get announced that it will be turned back on in the deploy notes for the Feb. 15th deploy of Canvas.

james_whalley · ‎02-16-2023

Is this supposed to fix the issue of copying and pasting an image from one course to another? If so, that is not working properly.

chriscas · ‎02-16-2023

Hi @dlyons,

We're finding that we're unable to copy/paste images and text combinations from word as we were able to do previously when this feature was rolled out the last couple times. I Filed a support case, 09572760, and they replied "The function to copy the content directly over from Microsoft Word is not a supported type".

Can you clarify whether copy/paste and/or drag & drop of images/text from word is supposed to work with this feature or not? Based on above comments I believe it's supposed to work, but support's statement conflicts that. Appreciate any insight you can provide!

-Chris

kroeninm · ‎02-17-2023

Hi @james_whalley,

Depending on how you do the copy, it seems to work to copy from one course to the other. Just pretend you are copying from a website, make sure you are not in edit mode, right click/ctrl click and choose the option to copy image.

If I copy from edit mode to edit mode it doesn't work as it's trying to port over the HTML and all the code including the image which results it it not working.
If I copy from a Canvas page that is not in edit mode or copy the image from any website it works fine and inserts the image as well as uploading the image properly into the Uploaded Media folder within Files.

Hope that helps! (btw, I can't get it to copy from Mac OS Finder or to drag and drop an image into the RCE on a Mac so if you have a solution for that please share :))

Melanie

james_whalley · ‎02-17-2023

@kroeninm Thanks for the tip on right-clicking. I was highlighting and using cmd-C (not in edit mode) and that does not work.

eschiebel · ‎02-17-2023

@james_whalley Highlighting the image to copy/paste will not work. This is how:

On a page in Course A, right click on an image and choose Copy Image from the popup menu
In an RCE in Course B, paste (right click and choose Paste, or use the keyboard shortcut).

and the image is uploaded to canvas and shown in the Course B's RCE.

A better way to copy an image from one course to another would be from the course's Files page.

Click on the kabob menu button next to the image you want to copy,
then select "Copy To..." from the popup menu.
Search for the course you want it in,
optionally select a Module,
then click the Copy button.

I hope this is helpful.

james_whalley · ‎02-17-2023

@eschiebel See my comment directly above.

AllisonHowell · ‎02-17-2023

Hi @chriscas I have recently taken over as product manager for the team that developed this feature, so I'm happy to step in and answer your question.

First, I'd like to apologize for the confusion. We should've done a better job communicating what you should expect ahead of time.

Here's how this should work, along with a little history:

- If you copy plain text (which also happens to be the case if you copy from a pdf), the text is inserted into the RCE. A blank line will cause a new paragraph, but other than that there is no formatting.

- If you copy HTML, it will be pasted as HTML and maintain the content's structure: headings will still be headings, lists will still be lists and so forth. However, any styling included in the source material will be lost.

- Any images that are HTML tags referencing an image via URL will continue to display providing the user viewing your content has permission to access the referenced image.

- Any images that are HTML <img> tags using a data: URL to embed the image data in the HTML document will appear in the RCE when you paste, but get stripped when saved to Canvas.

- If you copy content from Microsoft Word, it will be pasted into the RCE as HTML and the above rules apply. If there are images embedded in the Word document, they will be discarded.

The first time we turned enhanced paste on in Canvas, content copied from Word came over complete with all its styling and embedded images. The way Word encodes the styling in what it puts on the clipboard results in a huge amount of content being pasted, to the point where this was exceeding some users' file quota. So we turned the flag off to fix this.

The second time we turned enhanced paste on, content copied from Word was getting pasted into the RCE as an image of the Word content. This is obviously not what anyone wanted, so we turned the flag off again.

The third time we turned enhanced paste on, we settled on the results described above: the structure of the document comes over, but styling and embedded images are discarded.

james_whalley · ‎02-17-2023

@AllisonHowell Did people have trouble pasting text before? I had never run into that issue. I thought this feature was all about improving the ability to bring images into the RCE. Is that not what "Copy and paste media directly into the RCE and have it automatically upload to your Files" at the top of this page is talking about?

AllisonHowell · ‎02-17-2023

@james_whalley Thanks for calling that out. I was trying to make the behavior with Word clear, but in doing that I just told you how it's always worked, which may not have been that helpful. 🙂

Here's a summary of the enhancements:

Copy and paste images into the RCE
If you copy an image from somewhere (right-click then choose "Copy Image" from the popup menu), then paste in the RCE (right-click and choose "Paste" from the menu or type the paste keyboard shortcut), the image is uploaded to your files in Canvas, then embedded in the RCE.

Similarly, if you copy an image file from the Mac Finder or Windows Explorer and paste it into the RCE, the file is uploaded to Canvas and the image is embedded in the RCE. This also works if you drag-and-drop the file into the RCE.

If your account or course has "Copyright and license information must be provided for files before they are published." turned on, then you will be presented with the "Upload Image" dialog where you can set the required usage rights before uploading.

Copy and paste other files into the RCE
If you copy a non-image file and paste it (or drag-and-drop it) into the RCE, it will be uploaded to Canvas and a link to the file will be inserted into the RCE.
You can currently copy and paste only 1 file at a time. If you select multiple files and try to paste them into the RCE, you will get a "Sorry, we don't support multiple files." message and nothing else will happen.

eschiebel · ‎02-22-2023

@james_whalley, the goal with this feature is to make pasting or dropping files (especially images) more convenient while keeping how text was handled the same as it ever was (to quote David Byrne). How content gets encoded into the clipboard and then how an application access it is complicated which led to a number of unexpected interactions between how text (especially content copied from Word) is handled and the new functionality.

We do our best to test so that updates work as we expect, but there's nothing like a few million users banging on it to find holes in our logic.

Thank you for your patience. I think we've got it now.

james_whalley · ‎03-01-2023

@eschiebel So, I got this working right when copying an image from Word using either the right-click or keyboard shortcut methods. I did notice that you can only copy and paste a single image and you cannot even have accompanying text (which I think is going to confuse faculty that think they can just use Select All, Copy, Paste and move something from a document to a Canvas page).

I also tried copying an image from another Canvas course. Here, right-clicking a single image for copying and pasting worked and saved a new copy of the image to the destination course. Copying with text allows the image to be pasted, but it doesn't save the image in the destination course (which may fool faculty into thinking they were successful). The same result comes from using shortcut keys to copy and paste (which is basically the only way I ever copy and paste).

Overall, I like the addition of the feature, but it seems to have such strict guidelines on how it will function properly that it seems like there is a lot of room for misunderstanding and frustration. I hesitate to tell faculty about this method and just stick to uploads or drag-and-drops.