Our users need to transfer files from a government website into our in-house web-based app. They need to move dozens of files a day, and until now they have been clicking each file link on the government website, saving the files to their local Downloads folder, then uploading them to our web app from there.
To simplify the process, I wrote code to allow them to drag the file links directly from the government website to a drop zone on our web app. I grab the file's URL from the drop zone's drop event in JS, then use that URL in .NET's WebClient.DownloadFile() method to pull the file into our web app.
This code works great in Edge, even when dragging links from one browser window (the government website) to a different browser window (our in-house web app). Chrome works too, as does Firefox. IE11, however, doesn't work. This is a problem because a number of our users need to use IE11 for backwards compatibility with a legacy version of SharePoint that we are still heavily using.
IE11 does not grab the file URL when the file's link is dropped on the drop zone. Instead, IE11 treats the link drop as if you'd clicked on the file link. In other words, it tries to download the file locally. There are a number of posts on SO that address this issue generally and some seem to indicate that the right combination of options should work even for IE11, but I can't get IE11 to cooperate under any circumstances.
Here is some example code that demonstrates the behavior (and a JS Bin to test it):
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Drag/Drop Test</title>
<style>
#dropArea {
width: 300px;
height: 200px;
margin-bottom: 40px;
border: 1px dashed;
}
</style>
</head>
<body>
<div id="dropArea">Drop dragged links here</div>
<a href="https://stackoverflow.com">This is a test link to Stack Overflow</a>
<script type="text/javascript">
var dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragenter', function (evt) { evt.stopPropagation(); evt.preventDefault(); }, false);
dropArea.addEventListener('dragexit', function (evt) { evt.stopPropagation(); evt.preventDefault(); }, false);
dropArea.addEventListener('dragleave', function (evt) { evt.stopPropagation(); evt.preventDefault(); }, false);
dropArea.addEventListener('dragover', function (evt) { evt.stopPropagation(); evt.preventDefault(); }, false);
dropArea.addEventListener('drop', dropHandler, false);
function dropHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
var droppedObjectURL = evt.dataTransfer.getData('Text');
alert("droppedObjectURL=" + droppedObjectURL);
}
</script>
</body>
</html>
To test, open the JS Bin in one Chrome/FF/Edge window, then open a 2nd Chrome/FF/Edge window to any page with a downloadable file (make sure to use the same browser flavor for both windows). Drag the file link from one window and drop it onto the other window's drop zone. In Chrome/FF/Edge, it should show a pop-up alert with the URL of the file link. In IE11, however, it will ask if you want to open or save the file instead as it attempts to download the file.
Most of the previous SO posts that addressed this IE11 issue were many years old, so I'm hoping something new has surfaced that will allow this to work in IE11. I'm also open to 3rd party solutions if nothing native can be done.
