JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="container">
    <div class="content">
        <div id="whatever"></div>
        <textarea>
        </textarea>
    </div>
</div>

CSS

html, body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            width: 100%;
            display: table;
            font-weight: 100;
            font-family: 'Lato';
        }

        .container {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

        .content {
            text-align: center;
            display: inline-block;
        }

JavaScript

var input = document.getElementsByTagName("textarea")[0];
    input.addEventListener('paste', pasteHandler);
    var whatever = document.getElementById('whatever');
    /*Handle paste event*/
    function pasteHandler(e){    //e:  ClipboardEvent
        //check if event.clipboardData is supported(chrome)
        if(e.clipboardData){
            var items = e.clipboardData.items;
            if(items){
                for(var i=0;i<items.length;i++){
//                    console.log(items[i]);
                    if(items[i].kind == 'file' && items[i].type.indexOf('image') > -1){
                        //need to represent the image as a file
                        var blob = items[i].getAsFile();

                        var reader = new FileReader();
                        //need base64 to upload to server
                        reader.readAsDataURL(blob);
                        reader.onload = function (event) {
                            var image = new Image();
                            image.src = event.target.result;
                            image.width = 250; // a fake resize
                            whatever.appendChild(image);
                            uploadFile(blob);
                        };
                    }
                }
            }
        }
    };