How do I accept file uploads from pasting a file into the browser?

Accepting image uploads from a paste into the browser window is much easier than traditional file upload form inputs and even the newer style drag 'n' drop file uploads.

How do I implement it?

Solution

Here's an example PHP/JavaScript page that accepts drag 'n' drop image uploads. It's not dependent on PHP though - you could adapt it quite easily to work with another server-based language. This code was based on a snippet I found on jsFiddle by someone called Nick.

This is a full page - so you should be able to copy the code below and put it in a file on your web-server as-is (if you're not running PHP then you'll need to update the PHP code at the top or point the form to your own form handler script).

<?php
    if (!empty($_POST)) {
        
        // Handle the POSTed data here - the image is actually base64 encoded data in
        // the $_POST['myTextarea'] variable which you can run through the base64_decode()
        // function and then write to a file
        
        $pos     = strpos($_POST['myTextarea'], 'base64,');
        $encoded = substr($_POST['myTextarea'], $pos + 7);
        $raw     = base64_decode($encoded);

        // Show the base64 encoded $data - use the $raw variable when writing to a file
        var_dump($_POST);
        exit;
    }
?>
<!DOCTYPE html >
<html>
<body>

<h1>File upload using paste</h1>

<p>
    You can paste an image, which is on your clipboard, into this window and it will appear below.
    If you use Windows you can press <b>PrtScr</b> to get a screenshot on your clipboard. Then
    press <b>CTRL+V</b> to paste it into this document.
</p>

<!-- PUT THE ADDRESS OF YOUR FORM HANDLER SCRIPT IN THE ACTION ATTRIBUTE -->
<form action="" method="post">
    <div id="form-elements-container">
        <input type="text" value="An example text input..." name="myTextInput"><br />
        <input type="submit" value="Submit form"><br />
    </div>
</form>

<!-- THIS IS WHERE THE IMAGE THUMBNAILS WILL APPEAR -->
<div id="images-container"></div>

<script>
    counter = 0;

    document.body.onpaste = function (e)
    {
        // use event.originalEvent.clipboard for newer chrome versions
        var items = (e.clipboardData  || e.originalEvent.clipboardData).items;

        // Find pasted image among pasted items
        var blob = null;
        for (var i=0; i<items.length; i++) {
            if (items[i].type.indexOf("image") === 0) {
                blob = items[i].getAsFile();
            }
        }

        // Load image if there is a pasted image
        if (blob !== null) {
            
            var reader = new FileReader();
            
            reader.onload = function(e)
            {
                // Create a new image object from the pasted data
                var img    = new Image();
                img.src    = e.target.result;
                img.width  = 128;
                img.height = 128;
                img.style.margin = '5px';
                
                // Append the file to the document
                document.getElementById('images-container').appendChild(img);
                
                // Add a new textarea to the form
                var textarea    = document.createElement('textarea');
                textarea.name   = 'myTextarea_' + counter++;
                textarea.value  = img.src;
                textarea.style.width  = '200px';
                textarea.style.height = '200px';
                document.getElementById('form-elements-container').appendChild(textarea);
                
            };
    
            reader.readAsDataURL(blob);
        }
    }
</script>
</body>
</html>