Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple HTML5 drag/drop javascript question

    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.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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.

    Code:
    <!DOCTYPE html>
    <head>
    </head>
    
    <body>
    
    <script>
    function chopPath(str){
    pos=str.lastIndexOf("/")
    str=str.substring(pos+1)
    return str;		
    }
    </script>
    
    <input type="text" onmouseout='this.value=chopPath(this.value)'/>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •