Link to home
Start Free TrialLog in
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?
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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
Avatar of Ivan Golubar
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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial