Pass filename from file upload to text field

Question

I have a part of a form where a user can upload a file. I want only the filename to be sent to a text field in the same form. So if user uploaded "C:/Folder/image.jpg", the text field should show "image.jpg". I tried some code myself but I know it's wrong:

function ff_uploadimages_action(element, action)
{var m = data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/);
switch (action) {
case 'change':
if (data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/).value)
ff_getElementByName('filename').value = m[2].text;
        default:;
    } // switch
} // ff_uploadimages_action

ff_uploadimages is the field to upload file, and filename is the textfield where name should appear. Any help at all is appreciated! Thanks.

mixed results with input file's `value` as the filename, IE 8 and Chrome give "C:\fakepath\" + filename where as FF gives just filename — MikeM, Mar 30 '11 at 02:48

MikeM · Accepted Answer · 2019-06-15T16:40:34.887

Here's one way to do it

document.getElementById('upload').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('filename').value = filename;
}

<input id="upload" type="file" />
<input id="filename" type="text" />

you don't mention jQuery but given it's popularity here's the same solution using jQuery

jQuery:

$('#upload').change(function() {
    var filename = $(this).val();
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    $('#filename').val(filename);
});

Demo:

http://jsfiddle.net/pxfunc/WWNnV/4/

score 0 · Answer 2 · edited Jul 21 '16 at 06:53

0

HTML:

<input id="upload" type="file" onChange="uploadOnChange(this)" />
<input id="filename" type="text" />

JS:

function uploadOnChange(e) {
    var filename = e.value;var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex +1);
    }
    document.getElementById('filename').value = filename;
}

edited Jul 21 '16 at 06:53

Draken

3,134
13
34
54

answered Jul 21 '16 at 06:33

Jesus Erwin Suarez

1,571
16
17

score 0 · Answer 3 · answered Nov 17 '17 at 21:59

A shorter way in jQuery would be the following:

HTML

<input type="file" id="inputFile" class="hidden"/>
<input type="text" id="inputDisplayFileName" readonly/>
<button id="buttonChooseFile">Choose file</button>

jQuery

$("#buttonChooseFile").click(funtion()({
    $("#inputFile").click();        
});

$("#inputFile").change(function(){
    var fileName = $("#inputFile").prop('files')[0]["name"];

    $("inputDisplayFileName").val(fileName);
});

In this example the default file upload is hidden so that you can style the 'upload file input' as desired. Clicking the button will trigger the original (hidden) file upload. After choosing the file the .onchange() will do the rest of the work, copying the file the 'read only input text'.

Pass filename from file upload to text field

3 Answers3

Linked