How to use HTML5 clipboard API to paste image in HTML

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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:

1
2
3
4
5
<?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.

1
drwxrwxr-x 2 root www-data 4.0K Sep 9 02:34 uploads
Share