1

I tried the availabe drag drop download samples but the problem is it works perfectly fine in Chrome but when you try to drag drop a file onto the local machine with the intention of downloading using IE, it only downloads a shortcut link to the file.

Anyone have a solution to the problem ?? please share...

I tried to work with the code in the following link. http://www.thecssninja.com/javascript/gmail-dragout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-GB">

<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <meta name="author" content="The CSS Ninja">
 <meta name="keywords" content="Drag and drop, HTML5, DownloadURL, setData, dataTransfer">
 <meta name="description" content="How to create reverse drag and drop functionality like Gmail in Chrome 5 and upwards">
 <meta name="robots" content="all">
 <meta name="copyright" content="The CSS Ninja">
 
 <link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
 
 <title>Drag a file from a website to your filesystem like Gmail does | The CSS Ninja</title>

</head>
<body>
 
 <div class="container">
  <h1>Drag out any of these links to your dekstop</h1>
  
  <a href="Eadui.ttf" id="dragout" class="dragme" draggable="true" data-downloadurl="application/octet-stream:Eadui2.ttf:http://thecssninja.come/demo/gmail_dragout/Eadui.ttf">Font file</a>
  
  <a href="Eadui.ttf" id="dragout2" class="dragme" draggable="true" data-downloadurl="application/pdf:HTML5CheatSheet.pdf:http://thecssninja.come/demo/gmail_dragout/html5-cheat-sheet.pdf">PDF file</a>
 </div>
 
 <script type="text/javascript">
  var files = [document.getElementById("dragout"),document.getElementById("dragout2"),document.getElementById("dragout3")],
   fileDetails = [];
  
  // Some forward thinking, utilise the custom data attribute to extend attributes available.
  if(typeof files[0].dataset === "undefined") {
   // Grab it the old way
   fileDetails[0] = files[0].getAttribute("data-downloadurl");
   fileDetails[1] = files[1].getAttribute("data-downloadurl");
  } else {
   fileDetails[0] = files[0].dataset.downloadurl;
   fileDetails[1] = files[1].dataset.downloadurl;
  }
  
  files[0].addEventListener("dragstart",function(evt){
   evt.dataTransfer.setData("DownloadURL",fileDetails[0]);
  },false);
  files[1].addEventListener("dragstart",function(evt){
   evt.dataTransfer.setData("DownloadURL",fileDetails[1]);
  },false);
 </script>
 
</body>
</html>
Dspinx
  • 19
  • 4

1 Answers1

0

Your code works fine in Chrome, FF, Opera, Safari and Microsoft Edge.

Why work on an older browser that Microsoft no longer supports?

My suggestion would be because it's no longer supported tell your users to use a supported browser.

Community
  • 1
  • 1
Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144
  • The main intention of the solution is to add the functionality into a SharePoint site which runs on IE... Therefore, Chrome and FF would not fit in. – Dspinx Apr 27 '16 at 02:12
  • You never said that. You said, "I tried to work with the code" from [this](http://www.thecssninja.com/javascript/gmail-dragout) resource. I'm not familiar with SharePoint, but I do know it's a Microsoft product and supports Edge. [Microsoft no longer supports IE](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support) so it's pointless to code for it. Saves the headache. – Michael Schwartz Apr 27 '16 at 02:29