For a while it's been possible to drag images into the editor and have them automatically upload and insert into the post. Thanks to this pull request from @nickytonline.

Drag and drop an image in the editor #10145

Name: Changelog: Paste images into editor
Rating: 1.3 (3065 reviews)
Author: link2twenty

nickytonline posted on Sep 01, 2020

What type of PR is this? (check all applicable)

[ ] Refactor
[x] Feature
[ ] Bug Fix
[ ] Optimization
[ ] Documentation Update

Description

Adds drag and drop image functionality to the v2 Editor. You can drop an image in the cover image section and it will upload. You can also drop an image in the content body of the post. This feature works exactly like image drag and drop on GitHub.

Related Tickets & Documents

#9992, #10203

QA Instructions, Screenshots, Recordings

To test

Ensure #9992 works still

Drag/drop a cover image

Drag a valid image file that we support and drop it on to the cover image area of the editor.
Once the file is dropped, it will behave like a file selection upload.
1. The spinner will appear
2. The image will upload successfully and a cover image will appear

Drag/drop a post body image

Drag a valid image file that we support and drop it on to the post body area of the editor.
The post body editable area will change to an opacity of 25%
The file uploads and inserts the markdown for the uploaded file into the last known cursor position of the post body editable area.
Opacity returns to normal.

Errors

If more than one file is dropped on either of the droppable regions mentioned above, a snackbar item will appear notifying the user that they can only drop one file.

If an invalid file is dropped on either of the droppable regions mentioned above, a snackbar item will appear notifying the user that the file is an unsupported image type.

Also, the editor help has been updated to take image drag and drop into account.

Added tests?

[x] yes
[ ] no, because they aren't needed
[ ] no, because I need help

Added to documentation?

[ ] docs.forem.com
[ ] readme
[x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

View on GitHub

Now it's also possible to copy and paste and image straight into a post without needing to save it as a file first. For instance I took this screenshot while writing this post and just pasted it in.