Use of input file with span to display selected file

Ivan Golubar
Ivan Golubar used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
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

Author

Commented:
Can you after clearing of span by clicking anywhere else on the window , then  select the same image as in previous case?
Multitechnician
Top Expert 2014
Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial