Preserving input value of type="file" in Coldfusion on postback

Question

Hi everyone,

I have a form in Coldfusion that initially has 5 input fields for file uploading. Should the user realize they have more than 5 files to upload in the process of attaching them, I would like the form to preserve the values when it submits itself for the change in # of fields.

Using the <cfform> tag with the preservedata="yes" attribute is supposed to accomplish this - but all I'm getting is a temp value stored in the input's value on resubmit that isn't displayed in the field nor works for a submission. Any help would be greatly appreciated!

edit: Thanks for the great answers everyone, you all helped and were correct. I was able to implement Adam's suggested solution. Works great! Thanks!

function changeFieldCount()  // javascript function for submit on input count change
 {
  var count = document.forms[0].numtotal.options[document.forms[0].numtotal.selectedIndex].value;
   document.forms[0].action = "me.cfm?count=" + count;
   document.forms[0].submit();
 }

---

<cfparam name="url.count" default="5">

<cfform name="dispfiles" method="post" enctype="multipart/form-data" preservedata="yes">
  <!--- looping for file input fields --->
  <cfloop index="counter" from="1" to="#url.count#">
 <cfinput type="file" name="file#counter#" size="50" maxlength="60"><br>
  </cfloop>

  <br>Number of Files to Attach: 
  <!--- looping for # of input selection--->
  <cfselect name="numtotal">
 <cfloop index="cnt" from="1" to="20" step="1">
  <cfoutput>
  <option value="#cnt#" <cfif #cnt# eq #url.count#>selected</cfif>>
   #cnt#
  </option>
  </cfoutput>
 </cfloop>
  </cfselect>

   <cfinput type="button" name="op-display" value="Display" onclick="changeFieldCount()">
   <cfinput type="button" name="op-upload" value="Attach Files" onclick="submitfrm(this.form)">
   <cfinput type="button" name="cancel" value="  Cancel  " onclick="window.close()">
</cfform>

---

This is what I'm getting when I view source on the resulting submission:

<input name="file1" id="file1"  type="file" value=".../cfusion.war/neotmp8858718543274653167.tmp" maxlength="60"  size="50"  /><br>

Answer 1

This is by design in all browsers for security reasons. They is no way for your to insert the value for a file field.

Answer 2

Build additional file inputs using JS DOM methods. Since you aren't leaving the page this is fast and nothing is lost.

Answer 3

To elaborate on @SpliFF's answer, what you need to do is dynamically create more file fields with JavaScript.

Here's an example that uses jQuery to make the JavaScript a little easier. I've also used a variable to track the number of file fields displayed so that they all have a unique number appended to their names, making it possible to loop over and uniquely identify them server-side.

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
    //track the current number of file fields displayed
    var numUploadFields = 5;
    //attach an anonymous function to the button to add more fields
    $(function(){
     $("#add5").click(function(){
      for (var i = 0; i < 5; i++){
       numUploadFields += 1;
       var newHTML = "<br/><input type='file' name='upload" +
                     numUploadFields + "' />";
       $("#someSection").append(newHTML);
      }
     });
    });
</script>

<form method="post" action="">
    <div id="someSection">
     <input type="file" name="upload1" /><br/>
     <input type="file" name="upload2" /><br/>
     <input type="file" name="upload3" /><br/>
     <input type="file" name="upload4" /><br/>
     <input type="file" name="upload5" />
    </div>
    <input type="button" id="add5" value="Add 5 more file fields" />
</form>