Get URL of resource that is drag-and-dropped on field

Question

I have an html page with a certain input field and I want to add the following functionality.

The user should be able to drag and drop a resource onto the field. The result of this action should be that the url of the resource appears in the field.

The resource could be a local file, resulting in a url like file:///home/me/document or file://c:\windows-files\document.doc.

The resource could also be a web resource, resulting in a url like http://host.nl/document.doc or even ftp://host.nl/document.doc, although at this point I'm not really interested in ftp resources. I'm assuming a dnd-action of a web-page url from the address bar of a web browser, or a dnd-action of a file on the client machine from e.g. the desktop.

As usual for web apps, I want this functionality to work on most platforms. (Linux/Win/MacOS, Firefox/Chrome/Safari/IE/Opera)

The paradigm is html and JavaScript.

There is a related question about drag & drop file upload in browsers: http://stackoverflow.com/questions/2657653/drag-and-drop-file-upload-in-google-chrome-chromium-and-safari I don't know about drag & drop web resources, perhaps copy & paste the URL? — Ruben, Oct 20 '11 at 09:21
@Ruben: That question is indeed related. My question does not involve uploading however. — Rinke, Oct 20 '11 at 14:57
Where is the resource being dragged *from*? In other words, it seems likely that the drag-action resulting in a `file://` path is a direct drag-drop of the file itself, but what about other url resources? — Daniel Mendel, Oct 25 '11 at 14:13
@DanielMendel: Typically from the address bar of a web browser. Good comment btw (+1). — Rinke, Oct 25 '11 at 14:20

Keith.Abramo · Answer 1 · 2011-10-28T23:51:48.473

Do to security measures put in place by all modern browsers it is impossible to get the real full path of a file which has been drag and dropped into a browser.

All major browsers now replace the file path with "/fakepath/'FileName'" where 'FileName' is the name of the file you selected.

You can however still do drag and drop functionality and get JUST the file name of the file you dragged into the browser.

Here is a jsfiddle of a modification of the answer to the related question noted in the comments of the question

http://jsfiddle.net/c7cqN/

Alexander Zinchenko · Answer 2 · 2011-10-28T15:14:53.110

3

In Firefox you can use file.mozFullPath. However, this variable presents only in Firefox and don't work in Chrome or Safari.

edited Oct 28 '11 at 15:14

answered Oct 28 '11 at 13:44

Alexander Zinchenko

589
2
7

score 2 · Answer 3 · answered Sep 17 '14 at 14:34

i have done code of Keith Abramo simple to read and added view changes

Drag and dropp URL from other Browser or Tab could be used for create something like Bookmarks..

i find it useful!

<!DOCTYPE HTML>
<html>
  <head> 
  <style>
      #uploadelement {

        display:none;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0;
      }
      #showURL{
        border:1px solid green;
        padding-left:4px;
        padding-right:4px;
        background-color: #aaa;
        border-radius: 5px;
      }
    </style>
  </head>


<script>
    var entered = 0;

    window.onload = function() {
         // auto focus in input -> mean all is ready to get dragable URL
         document.getElementById('fileName').focus();

         document.getElementById('getURL').ondragenter= function(){      
               entered++;
               document.getElementById('uploadelement').style.display='block';
        }

         document.getElementById('getURL').ondragleave = function(){
               entered--;
               if (!entered) document.getElementById('uploadelement').style.display='none';
        }

        document.getElementById('uploadelement').onchange = function(){
              if (this.value) { 
                      document.getElementById('fileName').value = this.value.replace(/^C:\\fakepath\\/i, '');
              }

        }
        // ready for using URL as string value of input
        document.getElementById('showURL').onclick = function() {

              console.log(  document.getElementById('fileName').value );
        }
    }



</script>

<body >
  <div id = "getURL" >

    <form method="post" enctype="multipart/form-data" id="uploadform">

       Things can be dragged and dropped here!

       <input type="text" id="fileName"/>

       <input type="file" id="uploadelement" name="dragupload[]" />


       <span id="showURL">show URL</span>

    </form>

  </div>
</body>
</html>

way to go! thanks for pulling out the js, css separately, here's your solution in a fiddle. http://jsfiddle.net/Lkrjzpnu/2/ — m1m1k, Jun 03 '21 at 23:45

Get URL of resource that is drag-and-dropped on field

3 Answers3

Linked