Avatar of Ivan Golubar
Ivan Golubar
 asked on

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?
JavaScriptPHPFonts Typography

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
leakim971

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 Golubar

ASKER
Can you after clearing of span by clicking anywhere else on the window , then  select the same image as in previous case?
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes