JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" onsubmit="return checkBeforeSubmit()">
 <input type="hidden" name="quit" value="<?php echo $quit; ?><?php echo $aika; ?>" />
 <input type="hidden" name="base64encimg" id="base64encimg" value="" />
 <div style="float:left; text-align:center; margin-left:5px; width:31.5%; position:relative;">
 <strong>Nimi:</strong> *<br /> <input type="text" name="firstname" value="<?php echo $first; ?>" /><br/>
 <strong>Tapahtuma-aika:</strong> *<br /> <input type="text" name="lastname" value="<?php echo $aika2; ?>" /><br/>
 <strong>Kuva:</strong> * <br />
 Osoite:<br /><input type="text" name="kuva" value="<?php echo $kuva; ?>" size="50"/><br/>
 TAI
 <div style="border:3px #729EA5 solid; margin:0 auto; background-color:#D4E3E5;" id="paste">
 Paina CTRL + V
 <script src="js/pasteimg.js" type="text/javascript"></script>
 </div>
 <p>* Vaaditaan</p>
 <input type="submit" name="submit" class="laheta" value="Lähetä" />
 </div>
 </form>
 <script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
 </script>
 <div style="background-color:#729EA5; width:3px; height:99%; left:40%; position:absolute;"></div>
 <div style="float:right; padding:10px; width:65%; position:relative;">
 <div id="crop">
     <!--Kuva tulee tähän-->
 </div>
 </div>

JavaScript

var paste = document.getElementById('paste');
paste.onclick = function () {
    this.style.outline = 'black dotted thin';
};
if (!window.Clipboard) {
    var pasteCatcher = document.createElement("div");
    // Firefox allows images to be pasted into contenteditable elements
    pasteCatcher.setAttribute("contenteditable", "");
    // We can hide the element and append it to the body,
    pasteCatcher.style.opacity = 0;
    document.body.appendChild(pasteCatcher);

    // as long as we make sure it is always in focus
    pasteCatcher.focus();
    document.addEventListener("click", function () {
        pasteCatcher.focus();
    });
}
// Add the paste event listener
window.addEventListener("paste", pasteHandler);

/* Handle paste events */
function pasteHandler(e) {
    // We need to check if event.clipboardData is supported (Chrome)
    if (e.clipboardData && e.clipboardData.items) {
        // Get the items from the clipboard
        var items = e.clipboardData.items;
        if (items) {
            // Loop through all items, looking for any kind of image
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") !== -1) {
                    // We need to represent the image as a file,
                    var blob = items[i].getAsFile();
                    // and use a URL or webkitURL (whichever is available to the browser)
                    // to create a temporary URL to the object
                    var URLObj = window.URL || window.webkitURL;
                    var source = URLObj.createObjectURL(blob);
                    // The URL can then be used as the source of an image
                    createImage(source);
                }
            }
        }
        // If we can't handle clipboard data directly (Firefox),
        // we need to read what was pasted from the contenteditable element
    } else {
        // This is a cheap trick to make sure we read the data
        // AFTER it has been...