Page 1 of 1

Very simple HTML5 drag and drop

Posted: Tue Jan 24, 2012 7:13 am
by rhecker
I need to be able to drop the filename of an image from one browser window to a form text input in a different window.

The files are already on the web server and the process will only be done by browsers supporting html5.

The only problem I have is that when I drag an image to the input box, it inserts 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 solution involves the file object .name property, but I don't know how to implement this.

Any help appreciated.

Re: Very simple HTML5 drag and drop

Posted: Wed Jan 25, 2012 1:13 am
by Christopher
Post your code.

Re: Very simple HTML5 drag and drop

Posted: Wed Jan 25, 2012 7:32 am
by rhecker
Hi Christopher, although I understand the importance of posting code, I didn't see how that would help for this question, but here it is. As you can see, it's just an image tag and an input tag. What's missin is the javascript function that would change the value of the dropped item to just the file name.

On page 1
echo "<div class='image_item'><img src='$path/$value' draggable='true'/><br/>";


On page 2
<input name ="page_image" type="text" size=50 value="<?php echo $page_image ?>">