CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrag-and-drop
starx207
starx207

Reputation: 367

Drag and Drop Image upload not working on certain browsers

I'm working on adding a feature to our website that allows users upload an image by dragging it from the desktop and dropping it in the browser. I created a "drop zone" using a div, gave it a width and height, and added the dragover and drop event listeners to it. It works fine in Chrome and Edge, but is not working in Firefox, IE, or Opera. For those three browsers, as soon as I try and drag the image into the browser, the cursor changes to a circle with a slash through it indicating that the drag action will be cancelled. I know I have to prevent the browser defaults, because the default for Chrome is to copy the image address and display it in a new window. I was able to make it work for Chrome, but for some reason the code I have to prevent the defaults isn't working for those other 3 browsers.

Here is the code:

HTML:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />
    <title>Image Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="css/StyleSheet.css" rel="stylesheet" />
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" defer></script>
    <script src="script/JavaScript.js" defer></script>
</head>
<body>
   <input type="file" id="file" name="files[]" multiple onchange="startRead()"/>
   <div id="draghere">Drop Your files here <span id="mouseposition"></span></div>
   <div id="op"></div>
</body>
</html>

CSS:

#draghere {
    width: 50%;
    height: 150px;
    border: 1px solid lightgray;
    font-size: 3em;
    text-align: center;
    padding-top: 50px;
}

JavaScript (using JQuery): 

window.addEventListener("dragover", function (e) {
    e = e || event;
    e.preventDefault();
}, false);
window.addEventListener("drop", function (e) {
    e = e || event;
    e.preventDefault();
}, false);

// Fired when uploading an image using the input button
function startRead(evt) {
    var file = document.getElementById("file").files[0];
    if (file) {
        if (file.type.match("image.*")) {
            getAsImage(file);
            alert("Name: " + file.name);
        }
    }

    evt.stopPropagation();
    evt.preventDefault();
}

// Fired when uploading an image using drag and drop
function startReadFromDrag(evt) {
    var file = evt.dataTransfer.files[0];
    if (file) {
        if (file.type.match("image.*")) {
            getAsImage(file);
            $("#draghere").css("background-color", "");
        }
    }

    evt.stopPropagation();
    evt.preventDefault();
}

function docolorchange(evt) {
    $("#draghere").css("background-color", "yellow");
}

function getAsImage(readFile) {
    var reader = new FileReader();
    reader.readAsDataURL(readFile);
    reader.onload = addImg;
}

function addImg(imgsrc) {
    // Display image
    $("#op").prepend("<img src='" + imgsrc.target.result + "'/>");

    // upload to server
}

// Add event Listeners to drop zone
var droppingDiv = document.getElementById("draghere");
droppingDiv.addEventListener("dragover", docolorchange, false);
droppingDiv.addEventListener("drop", startReadFromDrag, false);

Am I missing something that would allow me to do the drag and drop in Firefox, IE, and Opera? According to what I've read about the Drag and Drop API, it should work in all browsers, but that is not the experience I've been having.

Thanks in advance!

UPDATE: The thing that makes this really strange is that the day I wrote this code, I tested it in all 5 browsers I mentioned and it worked in all of them. The next day, it stopped working in IE, Edge, and Opera. I didn't change a single line of code! It made me think it was an issue to do with the cache, so I cleared it on each browser, but still nothing...

Upvotes: 1

Views: 2472

Answers (1)

Zetura
Zetura

Reputation: 566

I just tried in Chrome, Firefox and Opera (Mac OS) and it's working on all 3.

Anyway, the input file HTML tag is working with drag'n drop. So instead of creating a div and using JavaScript to handle all the events, you could just style your input to create a drag'n drop box from your input directly. Then the drag'n drop should work on all browsers.

Upvotes: 1

Related Questions