0

I am trying to populate an input, of type text, with the the file name that has been selected. From what I have read sometimes you have to set the value to "" or null onClick then onchange set the place holder.

I have tried many different variations, but it just doesn't seem to fire. What am I overlooking?

My very basic example....

<script type="text/javascript">
    getElementById("upFile").onClick = function(){
        this.value = "";
    }

    getElementById("upFile").onchange = function(){
        getElementById("uploadName").value = this.value;
    }
</script>


    <input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title">
    <input type="file" id="upFile" name="upFile" enctype="multipart/form-data"><br>

What I have read

Changing the placeholder text based on the users choice

Change placeholder text

Upload files using input type="file" field with .change() event not always firing in IE and Chrome

HTML input file selection event not firing upon selecting the same file

None of which seem to be my issue...

Community
  • 1
  • 1
gregnnylf94
  • 370
  • 3
  • 16
  • 1
    try moving the script tag after the html – Brian Jan 18 '17 at 16:47
  • Check your browser console for errors. Unless you've arranged otherwise, it's `document.getElementById()`. – Pointy Jan 18 '17 at 16:47
  • @Brian I just tried, no luck. – gregnnylf94 Jan 18 '17 at 16:48
  • @Brian However I do not think that is the issue being I have a working script above the html doing something different – gregnnylf94 Jan 18 '17 at 16:49
  • @Pointy Sorry that is a typo I do have `document.getElementById()`. I've gotten crap for editing my Q's before. it would be appropriate to edit my Q now, no? – gregnnylf94 Jan 18 '17 at 16:50
  • 1
    Have you looked in your browser's inspector to see what errors are showing up? – raphael75 Jan 18 '17 at 16:51
  • Had to make sure, it's always a good idea to add scripts after elements anyway. I'm browsing through my projects for image uploads, fairly certain I've done something similar before. – Brian Jan 18 '17 at 16:52

2 Answers2

1

You are missing document.getElementById and onClick should be onclick

user1628733
  • 156
  • 1
  • 8
0

Here you go. You can get rid of the onclick event listener, and watch for changes instead. The file upload element creates an array of files and you can access it like so:

<input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title">
<input type="file" id="upFile" name="upFile" enctype="multipart/form-data">

<script>
    document.getElementById("upFile").onchange = function(){
        // single file selection, get the first file in the array
        document.getElementById("uploadName").value = this.files[0].name; 
    }
</script>

FYI: This is what happens if the script tag is before the element. It runs the script once read and says it can't find the element referenced with document.getElementById("upFile")

Uncaught TypeError: Cannot set property 'onchange' of null at :2:48

Brian
  • 1,873
  • 16
  • 25