patnet-image-paste

// ==UserScript==
// @name Patrick.net Image Paste
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Image Paste
// @match http://patrick.net/post/*
// @match https://patrick.net/post/*
// @run-at document-end
// ==/UserScript==

/* jshint esnext:true */

(function() {
    'use strict';

    /**
     * Recursively creates dom elements from your html string.
     *
     * @param {string} htmlStr
     * @return {DocumentFragment}
     */
    function htmlToFragment(htmlStr) {
        const template = document.createElement('template');
        template.innerHTML = htmlStr;
        return template.content;
    }

    /**
     * Recursively creates dom elements from your html string. Only the first top-level element will be returned.
     *
     * @example htmlToElements('  <label>foo <input value=123></label>').querySelector('input').value === '123'
     * @param {string} htmlStr
     * @return {Element}
     */
    function htmlToElements(htmlStr) {
        return htmlToFragment(htmlStr).firstElementChild;
    }

    function insertAfter(item, reference) {
        if (reference.nextSibling) {
            reference.parentNode.insertBefore(item, reference.nextSibling);
        } else {
            reference.parentNode.appendChild(item);
        }
    }

    function addCss(cssStr) {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.rel = 'stylesheet';
        style.innerHTML = cssStr;
        document.getElementsByTagName('head')[0].appendChild(style);
    }

    const imageForm = document.querySelector('#upload-file');
    const fileInput = imageForm.querySelector('[type=file]');

    const dropArea = imageForm;
    // const dropArea = htmlToElements('<div style="width: 300px; height: 300px; border: 1px solid #ccc;"></div>');
    const label = htmlToElements('<div>Drag and drop an image file, or paste an image from from your clipboard into this box.</div>');

    insertAfter(dropArea, imageForm);
    imageForm.prepend(label);


    dropArea.addEventListener('drop', evt => {
        evt.preventDefault();
        fileInput.files = evt.dataTransfer.files;
    });

    dropArea.addEventListener('dragover', evt => {
        evt.preventDefault();
    });

    dropArea.addEventListener('paste', evt => {
        const dataTransfer = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
            new DataTransfer(); // specs compliant (as of March 2018 only Chrome)

        // use event.originalEvent.clipboard for newer chrome versions
        const items = (event.clipboardData || event.originalEvent.clipboardData).items;
        // find pasted image among pasted items
        for (let i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") === 0) {
                dataTransfer.items.add(items[i].getAsFile());
            }
        }

        fileInput.files = dataTransfer.files;
    });

    addCss(`
    #upload-file {
        border: 1px solid #ccc;
        padding: 1em;
        background-color: #d9edf7;
        margin-bottom: 1em;
    }
    `);
})();