Ability to "paste" an image into the compose form

[BhaelOchon]

I can get the paste-to-insert function for images to work in Chrome 26 (dev) but not in Firefox 18, IE 9, Opera 12.5 (I know, it’s not on the list…), or Safari 5. Bug in Discourse? Cool (very epically awesome) feature of Chrome?

[codinghorror]

I really, really wish we could get image pasting with ctrl+v working in at least Firefox, but as @sam said:

Not going to happen for launch, Firefox is mental, the paste event comes back with no data… however Firefox will inject the content in to a contenteditable div.

Thing is, I am typing into a textarea, its not a contenteditable div, contenteditable divs are trouble, in fact codemirror moved off it due to all sorts of weird stuff happening. (see also here)

Gmail uses a contenteditable div that lives in an iframe, it feels kind of crazy to move to that just to support Firefoxes stupid cut-and-paste support.

See also:

Can one hack "paste image" support into a textarea in Firefox?

[persyval]

Seems like they fixed it a few days ago:
https://bugzilla.mozilla.org/show_bug.cgi?id=861512

Might be worth trying it out

[codinghorror]

I am not sure that fixes the core issue of not being able to paste into a TextArea in Firefox.

We can look at current versions of Firefox just to be sure though.

[codinghorror]

This was fixed at long last via a PR from @radq.

https://github.com/discourse/discourse/commit/c8c150dfbee938a1182794594bcd7c2584387f41

(Careful as there were several fixes to this later, care to tell the story @radq?)

However we only have a workaround for Firefox, not sure if supporting paste is even possible in IE?

[radq]

Firefox has weird behavior if you create a new contenteditable div for every paste, it would inexplicably fail after the first paste but only if you actually change the content you copy. Inserting a hidden contenteditable div during composer initializer and reusing it for every paste fixes the problem, this is the fixed commit:

https://github.com/discourse/discourse/commit/3b1ed996e7602912a45a03eef457bcfbbcd3ca5e

That one still doesn’t completely paste images that were copied from a different application since I forgot to set the canvas dimensions around line 388, instead it would default to 300x150. This was fixed later.

I expect it to work for Firefox 23+ and possibly even older versions but we only do this on FF26+ since I wasn’t able to test older versions.

[BhaelOchon]

@radq, I just want to say I this so much more than a simple “like” can convey. Thank you for all the time and effort you’ve put into this!

[Myron]

Guess what! On Firefox 42.0 this function is no-longer working, again. Can’t paste an image that’s in the clipboard into the compose window.

[codinghorror]

Hmm yeah @eviltrout this must have regressed again. I can confirm pasting an image does not work in Firefox any more.

[Myron]

Oops. Something like: “Fatal error: Coffee not found. Programmer tried to divide by zero.” LOL

[purldator]

Yes, same here. I tried doing that with this reply and ended up having to save the image to my desktop, then drag it to the composer’s form field.

In Firefox (latest; 42.0).

[Myron]

Yes, same here. I tried doing that with this reply and ended up having to save the image to my desktop, then drag it to the composer’s form field.

In Firefox (latest; 42.0).

Thanks for this update. I was looking for something wrong in my installation and this is going to save me loads of time as I have nothing to find.

[eviltrout]

Oops, looks like when converting some code to ES6 that a function() was missed. Fixed here and confirmed pasting in Firefox works again:

FIX: Pasting images was broken in Firefox

[codinghorror]