Page MenuHomePhabricator

Allow pasting images when creating Pholio mocks
Open, NormalPublic

Description

From one of our designers:

It’s really convenient to be able to paste an image in a text field on Phab comments instead of saving it out and uploading it. I’m testing Pholio for the first time, and I’d love to see the same functionality for uploading designs. Currently there’s only support for dragging in an image file.

Event Timeline

swisspol created this task.Jun 18 2014, 4:52 PM
swisspol raised the priority of this task from to Needs Triage.
swisspol updated the task description. (Show Details)
swisspol added a subscriber: swisspol.

The whole copy-paste-images thing only works in Chrome, although it's been a couple of years since we wrote it I think so maybe it can be made to work elsewhere by now.

chad triaged this task as Normal priority.Jun 18 2014, 9:20 PM
chad added a project: Pholio.
chad added a subscriber: chad.

In Chrome, if you copy/paste raw image data (for example, select some pixels in Photoshop and copy them to the clipboard) into a textarea (for example, the comment text area in Maniphest), we'll do the right thing (create an image and upload it). This is possible because Chrome has a great deal of support for it, and we don't have to do too much work.

When creating or editing a Pholio mock (e.g., https://secure.phabricator.com/pholio/new/) we should interpret pastes into the document (i.e., not with an input selected) in the same way, as though the user had dragged-and-dropped the image into the "Drag and drop images here to add them to the mock." target.

This code is also at least a year or two old, and Firefox and Safari may support the same functionality by now. Poke around and/or check Google/Stackoverflow and see if it's workable now. If not, we can try again in a year.

Most of the code in question is in webroot/rsrc/js/core/DragAndDropFileUpload.js.

This code is also at least a year or two old, and Firefox and Safari may support the same functionality by now. Poke around and/or check Google/Stackoverflow and see if it's workable now. If not, we can try again in a year.

From experiments in connection with D9647, it looks like this is still not possible.

It can be faked in Firefox by focusing a contentEditable div before the paste fires, then reading the image out of it. imgur.com does this. However, this is a giant hacky mess and I don't think it's worth pursuing at this time.

epriestley added a subscriber: lpriestley.

We looked at this and it's a bit involved technically -- the "good" news is that it already "works", in that if you click the dashed-border-div thing. Chrome internally saves that as the event target and then magic accidentally happens when you paste.

timor added a subscriber: timor.Sep 29 2014, 10:55 AM
qgil added a subscriber: qgil.Feb 9 2015, 10:36 AM

fwiw, http://pasteboard.co/ is reported to work on Firefox for Windows and Mac. I haven't tried myself, and I have no idea what is the sauce being used there.

I was planning to add similar request for conpherence, but it seems this task covers my request.

chad added a comment.Mar 11 2015, 1:47 PM

@skibbipl Phabricator supports pasting images into any Remarkup textarea, including Conpherence.

rbalik added a subscriber: rbalik.Apr 11 2015, 7:04 AM

Pasteboard.co uses the separate-div-with-contentEditable technique as well:

https://github.com/JoelBesada/pasteboard/blob/master/assets/js/modules/copyandpaste.coffee