Get File Name from File Upload

[Violet_82]

HI guys,
I run into a problem. I have a input of type file and I'd like to grab the file name of the uploaded file and assign it to a variable, but I don't seem to be able to do that.
I'm hiding hte input with opacity 0 and hiding it behind a span which is styled to look like a button, common techinque as we all know, that shouldn't have any inpact on what I'm doing whatsoever. Anyway, here is the script (it's part of a Spring application by the way), here is the fll code:

 JavaScript.getCurrent().execute(""
            +"var $HTMLpopup = $('<div class=\"popupContainer\">"
                +"<div class=\"wrapper\">"
                    +"<div class=\"mask\">"
                        +"<input type=\"file\" title=\" \"name=\"uploadFile\" class=\"uploadFile\">"
                        +"<span class=\"pseudoBtn\">Browse</span>"
                        +"<input type=\"text\" name=\"displayFile\" class=\"displayFile\" placeholder=\"no file loaded\">"
                    +"</div>"                                           
                +"</div>"
            +"</div>');"
            +"$('.popupTriggerBtn').click(function(){"
                +"/*alert('button clicked!');*/"                                                 
                +"var $body = $('body');"
                +"$HTMLpopup.appendTo($body);"
            +"});"
            +"var $browse = $HTMLpopup.find('.pseudoBtn');/*find pseudo button*/"                                       
            +"$browse.click(function(){"
                +"console.log($browse.attr('class') + 'clicked');"
                +"$('input.uploadFile').trigger('click');"
            +"});"
            +"var $uploadFile = $HTMLpopup.find('.uploadFile');/*find real upload button*/"
            +"$uploadFile.change(function(e){"
                +"console.log('button pressed');"
                +"var fileName = $('this').attr('src', e.target.result);"
                +"console.log(fileName);"          
            +"});"
        +"");

Now, this generates a popup and there you have the file upload button, the pseudo button hiding it and an input field which I will use to display the file name:

+"<input type=\"file\" title=\" \"name=\"uploadFile\" class=\"uploadFile\">"
 +"<span class=\"pseudoBtn\">Browse</span>"
 +"<input type=\"text\" name=\"displayFile\" class=\"displayFile\" placeholder=\"no file loaded\">"   

So I click the pseudo button, the file system window opens, I select the file and press OK and that's when I want to get that file name.
I tried in a few different ways, but I either get an error or just undefined, and I don't quite get the reason why I get undefined, whether it's a matter of timining or just a stupid error I'm making.
This, which should work, returns undefined:
+"var fileName = $('this').val();"
This comes back with an error, saying "TypeError: $(...).prop(...) is undefined"
+"var fileName = $('this').prop('files')['name'];"
This returns an object but I'm not sure if it's helpful or not:
+"var fileName = $('this').attr('src', e.target.result);"

So, any idea? Not sure what else to try
thanks

[Violet_82]

well, well, lo and behold...It seems like I cracked it in the end, but alas I have no idea why. So, this is what I've done, something very simple in fact. As you can see I used $('this'), as I would normally do:
+"var fileName = $('this').val();"
except that it doesn't need the darn quotes around it,
+"var fileName = $(this).val();"
too many quotes in that script, I got confused.