File input what am I doing wrong?

Question

I've been working on this form for a while trying to get a text field to mimic a file input field (when clicked it triggers the hidden file field to open). I have used a bit of Javascript to change the VALUE of the text field but I can't get it to work. See it here http://jsfiddle.net/ygMLm/.

<script type="text/javascript">
 function getFile(){
   document.getElementById("uploaded").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("upclicked").value = fileName[fileName.length-1];
    document.adupload.submit();
    event.preventDefault();
  }
</script>

<p><input type="text" id="upclicked" onclick="getFile()" placeholder="Select a File (960 Width JPEG)"></p>
<div style='height: 0px;width: 0px; overflow:hidden;'>
<input type="file" name="date" value="" id="uploaded" onclick="getFile()">

EDIT:

$('#uploaded').change(function(){
    var file = obj.value;
    var fileName = file.split("\\");

    $('input[name=faux]').val(fileName[fileName.length-1]);
});

Which browser? I just tried with Chrome and at first glance it seems to do what you want...EDIT: sorry--now I see what you are complaining about... — David Tansey, Aug 08 '13 at 17:05
See: http://stackoverflow.com/questions/16802881/get-path-from-input-type-file — Diodeus - James MacFarlane, Aug 08 '13 at 17:06
@EfrainAnthonyNegron unfortunately you won't be able to trigger a click of `input[type=file]` on most browsers. What you can do is position your `invisible` file type element over the text box. — Jibi Abraham, Aug 08 '13 at 17:37

score 2 · Accepted Answer · answered Aug 08 '13 at 17:32

2

Add this to your jQuery code to run on DOM ready:

$("#uploaded").change(
  function() {
    var fullPath = $(this).val();
    var splitPath = fullPath.split("\\");
    $("#upclicked").val(splitPath[splitPath.length - 1]);
  }
);

answered Aug 08 '13 at 17:32

Zhe

396
1
13

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Look at the following post

how to fire event on file select

for examples of how to use the change() event on the file control. You should be place your code to update the value of the textbox, inside of this event.

Hope that helps.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 08 '13 at 17:10

David Tansey

5,813
4
35
51

Unfortunately I'm not the greatest in javascript so this isn't apparent enough for me to completely grasp. I've tried the code above in the EDIT section. – Efrain Anthony Negron Aug 08 '13 at 17:26

File input what am I doing wrong?

2 Answers2