Use of input file with span to display selected file

Next are elements I use to upload images. File uploading form to browse for file, then to select the file and to confirm the selection with "open" button. Upload button, which will start the upload with redirecting to php file. And "span" element which will display selected image file.

<form id="avatar_form" enctype="multipart/form-data" method="post" action="loadbackImg1.php">
            <label class="custom-file-upload"  >
            <input  type="file"  id="fileUpload1" name="loadBckImg" ></label>
             <input class="Btn2"  id="fileUpload1Btn" type="submit" value="Upload" > 
      </form><br>  <!---->                           
    <span class="upload-path1"></span><br> <br>

Open in new window

Next is the explanation of procedure and why I am using "span" element. On change event of file upload window-form, it will set ".files[0].name ". File upload window does't have any value when form is opened first time. When file is selected and confirmed the selection value ".files[0].name " is set unconditionally and displayed in "span" element. That's why upload button gets red font for "load" caption to notice user that everything is ready to click on button and to start the upload.
function fileUploadF(){
   span[0].innerHTML = document.getElementById('fileUpload1').files[0].name;
   document.getElementById('fileUpload1Btn').style.color="#5e80ad" ;
}
document.getElementById('fileUpload1').onchange=fileUploadF;

Open in new window

But user my then decide that he would prefer not to upload the selected file this time and to do other operations on the currently opened page. In this case "span" has to disappear and upload button caption color to return back to previous color on any click on page. Next is code does this:

window.addEventListener("click", function(event) {
   if (span[0].innerHTML){
    span[0].innerHTML = '';
    document.getElementById('fileUpload1Btn').style.color="#B2BABB" ;
   }
});  

Open in new window

After a while user my decide that he will perform the operation of uploading of the same file which he aborted before. But now when he selects the same file and does the confirmation clicking on "open" button nothing happens. That's because the same file is selected and the trigger works on change event. In other scenario when different file is selected this problem will not occur. Everything will proceed fine and user might upload the file regularly.

My opinion is that the deficiency of this solution is in triggering in on change event. That you have to select each time different file to make it work. And I was looking for solution in this area. But i could not find the right solution. To conclude I will make an summary in one sentence. When you select the same file as in previous case in file upload window, span element does not display the file which was selected.

How to solve this case?
Ivan GolubarAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
the solution provided in your previous question was good, not sure why you ask the same thing here.
I was able to select a second time the same image (no change) or another one
And click on anywhere else on the window clear the span and put back the original color of the button
Ivan GolubarAuthor Commented:
Can you after clearing of span by clicking anywhere else on the window , then  select the same image as in previous case?
leakim971PluritechnicianCommented:
Sorry for the late response.
You right, here a working version :

just reset your form in your window click event listener :
document.getElementById("avatar_form").reset();

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {

            var $ = function(id) {
                return document.getElementById(id);
            }

            var _ = function(className) {
                return document.getElementsByClassName(className)[0];
            }

            window.addEventListener("click", function(event) {
                console.log("second");
                _('upload-path1').innerHTML = "";
                $('fileUpload1Btn').style.color = "#B2BABB" ;
                $("avatar_form").reset();
            });

            function fileUploadF(){
                _('upload-path1').innerHTML = $('fileUpload1').files[0].name;
                $('fileUpload1Btn').style.color="#5e80ad" ;
            }

            $('fileUpload1').onchange = fileUploadF;
            $('fileUpload1').onclick = function(event) {
                console.log("first");
                event.stopImmediatePropagation();
            }
        }

    </script>
</head>
<body>
<form id="avatar_form" enctype="multipart/form-data" method="post" action="loadbackImg1.php">
    <label class="custom-file-upload"  >
        <input  type="file"  id="fileUpload1" name="loadBckImg" >
    </label>
    <input class="Btn2"  id="fileUpload1Btn" type="submit" value="Upload" >
</form><br>  <!---->
<span class="upload-path1"></span><br> <br>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.