Get input file value into textbox

Question

Onclick a button I get a file input box as array.

<input type='button' class='tiny button radius' value='+' id='addButton' data-id='".$v->quid."' data-role='image'>




 $("#addButton").click(function () {

        var newTextBoxDiv = $(document.createElement('div'));
        newTextBoxDiv.after().html('<div class="row">
<div class="large-4 columns left button-mar-top-btm">
<label class="tiny button radius multipleimg">
<input type="file" name="ques_'+quid+'[]' + '" id="ques_'+quid+'[]' + '">Upload Photo</label> </div>
<div class="large-6 columns button-mar-top-btm">
<input class="file-upload-input" type="text"></div>
<div class="large-2 left columns button-mar-top-btm">
<a href="#" class="removeField" >Remove</a></div></div>');
        });

so the above code will generate the input box with name 'ques_32[]' multiple times.

What I am trying to do is to put the chosen file value in a textbox on each click.

If it's about images you might be interested in: stackoverflow.com/questions/12570834/… — Roko C. Buljan
– Roko C. Buljan, Commented Aug 4, 2014 at 18:17

adeneo · Accepted Answer · 2014-08-04 18:16:14Z

2

It's actually as easy as just binding the change event on the file input, get the value and set it on a text input.

$('#ques_32\\[\\]').on('change', function() {
    $('#filename').val(this.value)
});

You won't get the real path for security reasons, so you'll end up with something like /fakepath/filename.png etc.

For multiple files and to just get the filenames, as you can't get the path anyway, you can do something like

$('#ques_32\\[\\]').on('change', function(e) {
    var filenames = [].slice.call(e.target.files).map(function(f) {
        return f.name;
    }).join(', ')

    $('#filename').val(filenames);
});

FIDDLE

answered Aug 4, 2014 at 18:16

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Raj Over a year ago

Thanks a lot for showing the path. It worked great.Only one problem is I have the input field as array now it is not detecting which file is clicked.

adeneo Over a year ago

You'll have to explain that better? In an array how exactly, and detect each file how ?

Raj Over a year ago

Now it's changed.Basically the file input can be more than one so how it can detect which input has been clicked.

adeneo Over a year ago

You'll have to target each one, or all of them with a class etc ?

Raj Over a year ago

That's what I am thinking for last 4 hrs....there will be a common class and onclick that class it will take the id of that particular file and then get the filename and put it in another textbox with same id.

|

MrTux · Accepted Answer · 2014-08-04 18:12:41Z

0

It is possible using HTML5 (i.e, not supported on older browsers): See http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

answered Aug 4, 2014 at 18:12

MrTux

34.4k30 gold badges120 silver badges158 bronze badges

Collectives™ on Stack Overflow

Get input file value into textbox

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related