View Full Version : Simple HTML5 drag/drop javascript question

01-24-2012, 04:46 PM
I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name.

I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg.

I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it.

Any help appreciated.

01-24-2012, 09:16 PM
As far as I am aware, images don't have an inherent name property, only one that you assign to them, so even if you could access that value it wouldn't be a reliable way to do it (because some images don't have names).

Below is my stab at this. I know there's a fancier regex way to do this, but I can never remember what it is. It seems that mouseout is the best even to listen for - mouseup would be the logical one, but from what I can tell, the mouse has to go down in the element for the up to register.

<!DOCTYPE html>


function chopPath(str){
return str;

<input type="text" onmouseout='this.value=chopPath(this.value)'/>

01-24-2012, 10:51 PM
Thank you for your response. You are right that a regex could be a solution, though I think there is a better solution that is simple, I am just missing a piece (or two) of the puzzle.

The "name' I referred to is a property of the file object. It is the file name, minus the path.

One advantage of using that is that, hopefully, the file name without the path can be inserted right from the start.

Hopefully someone will know just how to make this work.