How to submit a CFInput type=file within a CFDiv container

Question

I am submitting a file in a cfdiv container, but the value of the file is not submitting to the processing page. If I submit the file outside of the cfdiv, it sees the file value. However, if the file is inside a cfdiv or div container, the form field is undefined. I have also added the enctype="multipart/form-data" to the cfform, but it is still not working.

UPDATE:

This is the first page (index.cfm)

<div  name="loadcontainer" id="loadcontainer">
    <cfinclude template="homepage.cfm">
</div>

The homepage.cfm

<cfform name="school_create"   id="school_create" 
      action="pro_create_school.cfm"    
      enctype="multipart/form-data"  
      method="post">

    <cfinput size="50" type="file" id="school_logo" name="school_logo">
    <button  type="submit">Save</button>
</cfform>

When the save button is clicked, it doesn't see the form.school_logo value in the action processing page.

I have also tried using a normal form and input, instead of a cfform/cfinput, but the form is being loaded into another tab when submitted, instead of the div container.

Answer 1

I was able to Submit the form both the <cfinput type="file"..../> and other form field in the form with ajax.

<script>
                        function validateForm() {
                            var x = document.forms["add_academic_year"]["start_year"].value;
                            var y = document.forms["add_academic_year"]["end_year"].value;
                            if (x == null || x == "" || y == null || y == "") {
                                alert("Start Year and End Year Must be Selected");
                                return false;
                            }
                            if (y <= x) {
                                alert("End Year must be greater than Start Year ");
                                return false;
                            }

            console.log("submit event");
            var fd = new FormData(document.getElementById("add_academic_year"));
            $.ajax({
              url: "pro_academic_year.cfm",
              type: "POST",
              data: fd,
              enctype: 'multipart/form-data',
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( response ) {
                // display response in DIV
                $("#loadcontainer").html( response.toString());
            })
           .fail(function(jqXHR, textStatus, errorMessage) {
                // display error in DIV
                $("#outputf").html(errorMessage);
            })            
            return false;

                        }
                        </script>

Answer 2

"File" is an incorrect "type" for a CFINPUT in earlier CF Versions (not sure what version you are using). I did check the docs and it is allowed in current versions.

Meanwhile, Instead change your CFINPUT to:

<input size="50" type="file" id="school_logo" name="school_logo">

Or better yet, get rid of <cfform> - you aren't using it for anything and you don't need it. A good JS library (jquery) will provide you with better functionality for validation etc.

In this case you could easily do:

<form name="school_create"   id="school_create" 
      action="pro_create_school.cfm"    
      enctype="multipart/form-data"  
      method="post">

    <input size="50" type="file" id="school_logo" name="school_logo">

    <button  type="submit">Save</button>
</form>

And it would work as expected. Cfform is designed to provide simple validation functions in a native CF Fashion, but outside of tutorials and books explaining CFML almost no one uses it. When we see it used here at CF Webtools, we refactor it as soon as we are able.