how to set text box value to upload filename using javascript?

Question

how to set textbox value based on uploaded filename value.for example i'm upload file like test.zip same value affect in text box the below code am try but not get solution?

var filename= document.getElementById("file").value;
    <form>
     File: <input type="file" id="file" name="file"/>
     Upload File : <input type="text" value="'+filename+'"/>
    </form>

possible duplicate of [Dynamically set value of a file input](http://stackoverflow.com/questions/1017224/dynamically-set-value-of-a-file-input) — Brigand, Oct 16 '14 at 04:57

score 2 · Accepted Answer · answered Oct 16 '14 at 05:07

Use some thing like this

  <script>
   function setfilename(val)
  {
    var fileName = val.substr(val.lastIndexOf("\\")+1, val.length);
   document.getElementById("filename").value = fileName;
  }
</script>
    <form>
     File: <input type="file" id="file" name="file" onchange="setfilename(this.value);"/>
     Upload File : <input type="text"  id="filename"/>
    </form>

score 2 · Answer 2 · answered Oct 16 '14 at 05:10

You can get names of files by accessing files object of fileUpload like

document.getElementById("file").files[0].name

Assign this value to your text field onChange event of fileInput like this

document.getElementById("filename").value = document.getElementById("file").files[0].name;

will set first file name into your field with id filename

Getting value attribute of file input directly will get you fake file path like C:\fakepath\yourfilename.ext

score 0 · Answer 3 · answered Oct 16 '14 at 05:07

You need to listen onchange event of the file field and when it occurs you write the value to another text input.

var file = document.getElementById("file");
file.onchange = function() {
    document.getElementById('filename').value = file.value;
};

Where I set an id for the text field also:

Upload File : <input type="text" id="filename" value="'+filename+'"/>

However note, that the value you can retrieve from file input is not real but has a fake path due to security considerations. If you need only filename part of the full path you can split it by / character ad take the last piece.

how to set text box value to upload filename using javascript?

3 Answers3