SHARE
TWEET

patnet-image-paste

a guest Jun 8th, 2019 89 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ==UserScript==
  2. // @name Patrick.net Image Paste
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Image Paste
  6. // @match http://patrick.net/post/*
  7. // @match https://patrick.net/post/*
  8. // @run-at document-end
  9. // ==/UserScript==
  10.  
  11. /* jshint esnext:true */
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     /**
  17.      * Recursively creates dom elements from your html string.
  18.      *
  19.      * @param {string} htmlStr
  20.      * @return {DocumentFragment}
  21.      */
  22.     function htmlToFragment(htmlStr) {
  23.         const template = document.createElement('template');
  24.         template.innerHTML = htmlStr;
  25.         return template.content;
  26.     }
  27.  
  28.     /**
  29.      * Recursively creates dom elements from your html string. Only the first top-level element will be returned.
  30.      *
  31.      * @example htmlToElements('  <label>foo <input value=123></label>').querySelector('input').value === '123'
  32.      * @param {string} htmlStr
  33.      * @return {Element}
  34.      */
  35.     function htmlToElements(htmlStr) {
  36.         return htmlToFragment(htmlStr).firstElementChild;
  37.     }
  38.  
  39.     function insertAfter(item, reference) {
  40.         if (reference.nextSibling) {
  41.             reference.parentNode.insertBefore(item, reference.nextSibling);
  42.         } else {
  43.             reference.parentNode.appendChild(item);
  44.         }
  45.     }
  46.  
  47.     function addCss(cssStr) {
  48.         const style = document.createElement('style');
  49.         style.type = 'text/css';
  50.         style.rel = 'stylesheet';
  51.         style.innerHTML = cssStr;
  52.         document.getElementsByTagName('head')[0].appendChild(style);
  53.     }
  54.  
  55.     const imageForm = document.querySelector('#upload-file');
  56.     const fileInput = imageForm.querySelector('[type=file]');
  57.  
  58.     const dropArea = imageForm;
  59.     // const dropArea = htmlToElements('<div style="width: 300px; height: 300px; border: 1px solid #ccc;"></div>');
  60.     const label = htmlToElements('<div>Drag and drop an image file, or paste an image from from your clipboard into this box.</div>');
  61.  
  62.     insertAfter(dropArea, imageForm);
  63.     imageForm.prepend(label);
  64.  
  65.  
  66.     dropArea.addEventListener('drop', evt => {
  67.         evt.preventDefault();
  68.         fileInput.files = evt.dataTransfer.files;
  69.     });
  70.  
  71.     dropArea.addEventListener('dragover', evt => {
  72.         evt.preventDefault();
  73.     });
  74.  
  75.     dropArea.addEventListener('paste', evt => {
  76.         const dataTransfer = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
  77.             new DataTransfer(); // specs compliant (as of March 2018 only Chrome)
  78.  
  79.         // use event.originalEvent.clipboard for newer chrome versions
  80.         const items = (event.clipboardData || event.originalEvent.clipboardData).items;
  81.         // find pasted image among pasted items
  82.         for (let i = 0; i < items.length; i++) {
  83.             if (items[i].type.indexOf("image") === 0) {
  84.                 dataTransfer.items.add(items[i].getAsFile());
  85.             }
  86.         }
  87.  
  88.         fileInput.files = dataTransfer.files;
  89.     });
  90.  
  91.     addCss(`
  92.     #upload-file {
  93.         border: 1px solid #ccc;
  94.         padding: 1em;
  95.         background-color: #d9edf7;
  96.         margin-bottom: 1em;
  97.     }
  98.     `);
  99. })();
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top