Menu
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.
718
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>
In Firefox you can use file.mozFullPath. However, this variable presents only in Firefox and don't work in Chrome or Safari.
3
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/
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
