troubleshooting Question

Use of input file with span to display selected file

Avatar of Ivan Golubar
Ivan Golubar asked on
JavaScriptPHPFonts Typography
3 Comments1 Solution217 ViewsLast Modified:
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>
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;
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" ;
   }
});  
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?
ASKER CERTIFIED SOLUTION
leakim971
Multitechnician
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros