Upload screenshots by Ctrl+V

Question

As I know it is not possible to upload the files by hooking paste event by javascript.
But I have found such thing on trello.com
How to reproduce:

Only on windows and with google chrome I can'not reproduce it on linux ff or chrome

Create a new card
Click on it -> it's form appeared
Click on comment text area
Make screenshot by PrnScr, Ctrl+V -> upload process started (green progress bar in right top corner)

So how do they implemented it?

without checking, maybe they hooked to the keystrokes rather than the paste event? Curious if it works on Mac with Command-V — Zach Lysobey, Jun 17 '13 at 19:41
from my quick research it looks like java is handling paste uploads..I just briefly searched though so I may be wrong on this — Ronnie, Jun 17 '13 at 19:46
possible duplicate of [How to manage image pasting from clipboard in html5?](http://stackoverflow.com/questions/6219197/how-to-manage-image-pasting-from-clipboard-in-html5) - the functionality required is part of the clipboard API — Bojangles, Jun 17 '13 at 19:46
@Bojangles imgur handles only web links in clipboard not local files but thanks. — freemanoid, Jun 17 '13 at 19:47
Point of interest - StackOverflow also has clipboard image paste functionality. Just click the Image button 1st. — Zach Lysobey, Jun 17 '13 at 20:14

score 1 · Accepted Answer · edited May 23 '17 at 10:32

In Trello, they use an event handler registered on the paste event and basically accessing event.clipboardData.items.

The javascript code (here) is minified, hence not particularly easy to read, but it basically boils down to applying the trick found in that other question

Extract of the paste handler:

        c.prototype.paste = function (b) {
            var c, f, e, g, h, k, m, l;
            e = null;
            h = this.handlers;
            for (g in h)
                if (c = h[g], null != c.paste) {
                    e = c.paste;
                    break
                }
            if (null != e && (f = null != (k = null != (m = b.originalEvent) ? null != (l = m.clipboardData) ? l.items : void 0 : void 0) ? k : [], b = function (b) {
                return _.detect(f, function (c) {
                    return c.type === b
                })
            }, !b("text/plain") && (b = b("image/png"), null != b && (b = b.getAsFile(), null != b)))) return j.validFileSize(b) ? (n("Keyboard Shortcuts", "Paste - Upload Image From Clipboard"), e(b)) : P.show("File size exceeds 10mb limit",
                "error", "upload", 5E3)
        };

Upload screenshots by Ctrl+V

1 Answers1

Linked

Related