JSFiddle - React, Tailwind, and code Playground
HTML
<textarea autofocus id="text" style="height:400px;width:100%;">
Try copying an image, and then pasting here in the textbox. The image will be uploaded automatically with its filename being the formatted current time. An small animation will also be shown. This recipe currently only works in Chrome.
</textarea>
JavaScript
/*
* Enable direct copy & paste to upload an image. Works in Chrome only.
* Upload image courtesy at http://www.unionpaper.net
*
* This program is free software; you can redistribute it
* and/or modify it under the terms of the GNU General
* Public License as published by the Free Software
* Foundation; either version 3 of the License, or (at your
* option) any later version. Available at
* https://www.gnu.org/licenses/gpl.txt
*
* Copyright 2016 Ling-San Meng (f95942117@gmail.com)
* Version 20160729
*/
window.addEventListener('load', function() {
var _PasteImgUploadPubUrl = 'http://www.unionpaper.net/wp-content/uploads/2016/06/logo_homepage_20150714083101.png';
var uploadImgInnerHTML = '<img height="50" src="' + _PasteImgUploadPubUrl + '">';
var uploadImgDiv = document.createElement('div');
uploadImgDiv.style.position = 'fixed';
uploadImgDiv.style.bottom = '10px';
uploadImgDiv.style.display = 'none';
uploadImgDiv.style.left = Math.round(window.innerWidth / 5) + 'px';
document.body.appendChild(uploadImgDiv);
document.getElementById('text').onpaste = function(e) {
var items = e.clipboardData.items;
if (typeof items === 'undefined') {
return true;
}
var idx = -1;
if (items.length == 1 && items[0].kind == 'file') {
idx = 0;
} else if (items.length == 2 && items[1].kind == 'file') {
idx = 1;
}
if (idx != -1) {
var fileName = PasteImgUploadGetFormatTime() + '.png';
var files = items[idx].getAsFile();
if (files.size == 0) {
return true;
}
var formData = new FormData();
formData.append('uploadfile', files, fileName);
document.execCommand("insertText", false, 'Attach:' + fileName);
uploadImgDiv.innerHTML = uploadImgInnerHTML;
PasteImgUploadSlideUpElement(uploadImgDiv, -50, 10, 0.4);
return false;
}
};
}, false);
// Move up an element by changing its style property "bottom" from "startPx" px to "endPx"
// px...