How do I change HTML Label Text Once File Has Been Selected using Javascript

Question

Thanks for viewing my question. I have a form below that has a file input field. Safe to say I have hidden this input field, and am now using the label as the primary "button" to select the files. Once a user clicks on the "Upload Picture..." label, I want the text inside the label to change from "Upload Picture..." to the file name. I'm following this tutorial below however the javascript written (in the tutorial) is for multiple files being able to be selected by the user. I only am allowing my users to select ONE file. This is a change your profile picture page to give a little insight as to what this form does.

Here is the code:

<!-- Change Picture Form -->
            <div class="changepic-wrap">
              <form action="changepicauth.php" method="post">
                <input type="file" name="profilepic" id="profilepic" class="inputfile">
                <br>
                <label for="profilepic">
                  <img src="/images/profile/upload.png" />
                  Upload Picture...
                </label>
                <br>
                <div class="button-wrap">
                  <button>Change Picture</button>
                </div>
              </form>
            </div>

Here is the tutorial:

http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Can someone help explain to me what i have to do? I'm thinking something along the lines of an eventlistener but i'm not sure about javascript. I'm a backend dev and know very little about javascript. I do NOT WISH TO USE JQUERY. Straight javascript only.

Thanks again for your help StackOverflow members! :D

Edit: Some people have said that the text is changing already. It's not... I want the LABEL text to change. The "File Input" tag has two parts to it. The button, and the text next to the button. I've hidden the input tag using the following SASS code. This way only the "Upload Picture..." label text is displayed. Please make sure to add this SASS code to your file so you can see that the LABEL text does not change.

.inputfile
        width: 0.1px
        height: 0.1px
        opacity: 0
        overflow: hidden
        position: absolute
        z-index: -1

Answer 1

You can use the javascript onchange event to detect when the value of the #profilepic input changes.

When it does, you can capture the new value of the #profilepic input and replace the text of the label with that value .

Example:

 var profilePic = document.getElementById('profilepic'); /* finds the input */ function changeLabelText() { var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */ var fileNameStart = profilePicValue.lastIndexOf('\\\\'); /* finds the end of the filepath */ profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */ var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */ if (profilePicValue !== '') { profilePicLabelText.textContent = profilePicValue; /* changes the label text */ } } profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */ 

 <div class="changepic-wrap"> <form action="changepicauth.php" method="post"> <input type="file" name="profilepic" id="profilepic" class="inputfile"> <br> <label for="profilepic"> <img src="/images/profile/upload.png" /> Upload Picture... </label> <br> <div class="button-wrap"> <button>Change Picture</button> </div> </form> </div> 

Answer 2

You can use change event, select element having for attribute value equal to event.target : #profilepic element id , set the .innerHTML of selected element to event.target.files[0] .name

 document.getElementById("profilepic") .addEventListener("change", function(e) { document.querySelector("[for=" + e.target.id + "]") .innerHTML = e.target.files[0].name; }) 

 .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } 

 <!-- Change Picture Form --> <div class="changepic-wrap"> <form action="changepicauth.php" method="post"> <input type="file" name="profilepic" id="profilepic" class="inputfile"> <br> <label for="profilepic"> <img src="/images/profile/upload.png" />Upload Picture... </label> <br> <div class="button-wrap"> <button>Change Picture</button> </div> </form> </div>