Home/ Questions/Q 8405367
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T22:50:13+00:00

The following code is from a page that is dedicated exclusively for uploading images

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not all browsers support this, but Firefox will let you drag an image out of the browser to another browser or your computer, while Chrome does not allow you to drag an image out of the browser.

    This page has a so called dropzone, open it in Chrome and open an image in Firefox, and you can drag the image straight from Firefox to Chrome, however it does not seem to work the other way around.

    The script is well commented and should give you some ideas, and the drag and drop stuff is basically set up like :

    var dropzone;  
    dropzone = document.getElementById("dropzone");  
    dropzone.addEventListener("dragenter", dragin, false);
    dropzone.addEventListener("dragleave", dragout, false);
    dropzone.addEventListener("dragover", stopPropagation, false);
    dropzone.addEventListener("drop", drop, false);

    Where dragin, dragout, drop etc. are functions called on those events that you will find in the script.

    • 0