How to use HTML5 clipboard API to paste image in HTML (JS + Java/PHP)
HTML5 Clipboard API allows user to paste image from their operating system clipboard which makes users' life much easier. Here is how:
First, create an HTML file, together with javascript and css stylesheet:
<html>
<head>
<style>
.pastebox {
background: lightgreen;
border-style: dashed;
width: 400px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("pasteDiv").addEventListener("paste", pasteHandler);
};
function pasteHandler(e) {
var items = e.clipboardData.items;
for (var i = 0 ; i < items.length ; i++) {
var item = items[i];
if (item.type.indexOf("image") >=0) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status == 200) {
console.log("uploaded.");
} else {
console.log("oops, something wrong.")
}
};
xhr.onerror = function() {
console.log("cannot connect to server.");
};
xhr.open("POST", "/servlet/upload", true);
xhr.setRequestHeader("Content-Type", item.getAsFile().type);
xhr.send(item.getAsFile());
} else {
console.log("Ignoring non-image.");
}
}
}
</script>
</head>
<body>
<div class="pastebox" id="pasteDiv">
Paste image here.
</div>
</body>
</html>
The server side Java code to receive and process pasted image data:
String fileName = "/tmp/" + UUID.randomUUID() + ".png";
InputStream in = request.getInputStream();
FileOutputStream o = null;
try {
File f = new File(fileName);
o = new FileOutputStream(f);
byte buffer[] = new byte[1024 * 1024];
int n;
while ((n = in.read(buffer)) != -1) {
o.write(buffer, 0, n);
}
} catch (IOException e) {
// error handling code
} finally {
o.close();
in.close();
}
Another example using Javascript and PHP:
The html:
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
document.getElementById("pasteDiv").addEventListener("paste", pasteHandler);
};
function pasteHandler(e) {
var filename = Math.floor((1 + Math.random()) * 0x10000).toString(16)+".png";
var items = e.clipboardData.items;
for (var i = 0 ; i < items.length ; i++) {
var item = items[i];
if (item.type.indexOf("image") >=0) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status == 200) {
console.log("uploaded.");
var imgdiv = document.getElementById("imgbox");
imgdiv.innerHTML = imgdiv.innerHTML + "<img src=\"/uploads/" + filename + "\"/><br/>";
var pastediv = document.getElementById("pasteDiv");
pastediv.value = pastediv.value + "![](/uploads/"+filename+")";
} else {
console.log("oops, something wrong.")
}
};
xhr.onerror = function() {
console.log("cannot connect to server.");
};
xhr.open("POST", "upload.php?filename="+filename, true);
xhr.setRequestHeader("Content-Type", item.getAsFile().type);
xhr.send(item.getAsFile());
} else {
console.log("Ignoring non-image.");
}
}
}
</script>
</head>
<body>
Paste the image into the textbox below:<br/>
<textarea rows="10" cols="100" id="pasteDiv"></textarea>
<div id="imgbox">
</div>
</body>
</html>
The PHP code is:
<?php
define('ROOTPATH', __DIR__);
file_put_contents(ROOTPATH.'/uploads/'.$_GET["filename"], file_get_contents('php://input'));
?>
Make sure you create upload folder in your web server root folder and change the ownership to USER:www-data, e.g.
drwxrwxr-x 2 root www-data 4.0K Sep 9 02:34 uploads
Thanks hey now we know how to use Html5 copy and paste
good post.
Congratulations @yuxid! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPimg credz: pixabay.com
Nice, you got a 12.0% @minnowbooster upgoat, thanks to @yuxid
Want a boost? Minnowbooster's got your back!
The @OriginalWorks bot has determined this post by @yuxid to be original material and upvoted(1.5%) it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!