coldfusion cffile upload replace no file selected

Question

In Coldfusion, using cffile upload, when a file is selected with the browse button the name of the selected file shows next to the button. So far, so good. When I submit the file for upload, the text changes back to "no file selected". This is doubtless because we are submitting a form.

However, I'm submitting the form to the same page, and would like to see the name of the file selected instead of "no file selected" which is likely to confuse the user.

The code:

<form 
 enctype="multipart/form-data" 
 method ="post" 
 name   ="attupload"  
 action ="">

<cfoutput>   
   <table style = "margin-left: 40%">
  <tr><td>
   <input name="theupload" 
          type="file" 
          style = "font-family: comic sans ms; 
                   color: ##679C9C">        
  </td></tr>
  </table>
   <div style = "width:20%; margin:5% auto 5% 45%">  
     <input name  = "submit" 
            type  = "submit"
            class = "submitbut" 
            style = "font-size: 16px"
            value = "Upload File"> 
   </div> 

</cfoutput>   
</form>

The words 'no file selected' seem to be part of the input name = 'upload' field, but ColdFusion evidently takes control of it, and I cannot insert anything else.

Does anyone know how I can control the 'no file selected' note, so that I can put the name of the selected file back in that spot? I have tried with javascript, but it is simply ignored.

question from:https://stackoverflow.com/questions/66054972/coldfusion-cffile-upload-replace-no-file-selected

Answer 1

Once a file has been selected, you can access its properties via JavaScript with the File API. You can't affect the value displayed next to the default <input type="file"> field with JavaScript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

You should also avoid submitting forms to the same page. You should follow the process:

• Form page
• HTTP POST to form processing page.
• after form processing, <cflocation> (301 redirect) back to a list page or the form page.

When you post to the same page, the user can hit reload and be prompted to resubmit form data. This can be problematic in many situations. As an alternate, you can post the form data using Ajax or better, via Fetch. This avoids a re-post on page reload and redirecting away from the current screen.

Also, you should avoid naming an <input type="submit"> "submit". It can conflict with the JavaScript function submit() should you need to use it.

<input name  = "submit" 
        type  = "submit"
        class = "submitbut" 
        style = "font-size: 16px"
        value = "Upload File">