Geek Answers Handbook

Get the URL of the resource being dragged into the field

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

The user should be able to drag the resource into the field. The result of this action should be that the resource URL appears in the field.

The resource can be a local file, resulting in a URL, for example file:///home/me/document or file://c:\windows-files\document.doc .

The resource can also be a web resource, which leads to a URL like http://host.nl/document.doc or even ftp://host.nl/document.doc , although at the moment I'm not interested in ftp resources . I accept the dnd action of a web page URL from the address bar of a web browser or the dnd action of a file on a client computer, such as the desktop.

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

The paradigm is html and JavaScript.

+8
javascript html url drag-and-drop
source share
3 answers

In Firefox, you can use file.mozFullPath. However, this variable is provided only in Firefox and does not work in Chrome or Safari.

+3
source share

Make sure that security measures are implemented by all modern browsers, it is impossible to get the real full path to the file that was dragged and dropped into the browser.

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

However, you can use the drag and drop functions and get the JUST file name of the file you dragged into the browser.

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

http://jsfiddle.net/c7cqN/

+2
source share

I made Keith Abramo code that just read and added view changes.

You can use the drag and drop URL from another browser or tab to create something like Bookmarks.

I find this 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>
+1
source share

More articles:


All Articles