The following code is from a page that is dedicated exclusively for uploading images on imgur.com. This is a model from the net and you can drag and drop images from your pc whit no problems. My question is: What code i need to add so that i can drag and drop images from another browser?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Upload</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>.
<style>
body {text-align: center; padding-top: 100px;}
div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
#link, p , div {display: none}
div {display: inline-block;}
.uploading div {display: none}
.uploaded div {display: none}
.uploading p {display: inline}
.uploaded #link {display: inline}
</style>
<script>
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {
if (!file || !file.type.match(/image.*/)) return;
document.body.className = "uploading";
var fd = new FormData();
fd.append("image", file);
fd.append("key", "myapicode");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json");
xhr.onload = function() {
document.querySelector("#link").href = JSON.parse(xhr.responseText).upload.links.imgur_page;
var test = JSON.parse(xhr.responseText).upload.links.imgur_page;
var dataString = 'content=' + test + '&page=something';
$.ajax({
type: "POST",
url: "upload.img.php",
data: dataString,
cache: false,
success: function(html){
}
});
document.body.className = "uploaded";
}
xhr.send(fd);
}
</script>
</head>
<body>
<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<input style="visibility:collapse;width:0px;" type="file" onchange="upload(this.files[0])">
<p>Uploading...</p>
<a id="link">Its online!!!</a>
</body>
</html>
