Question

I’ve got this form:

<form id="imageinputpopup" class=suggestionsubmit style="display: none">
    <span>Add a thing!</span><br/>
    <label>url: </label><input name="imageurl" type="url"><br/>
    <label>file: </label><input name="imagefile" type="file"><br/>
    <input type='hidden' name='schoolid' class="schoolid">
    <input type="submit" value="Submit">
</form>

And this document.ready:

<script type="text/javascript">
$(document).ready(function() {

    $('.schoolid').val(get_gmap_value('school_id'));

    $(".allow-submission").live('click', function(){
        if($(this).attr('inputtype')=="colorpicker"){
            .....
        } else if($(this).attr('inputtype')=="image"){
            remove_hidden("#imageinputpopup");
            add_fieldname($(this), $("#imageinputpopup"));
            $("#imageinputpopup").dialog();
        } else if($(this).attr('inputtype')=="text"){
            ....
        } else {
            //nothing
        }
    });

    $(".suggestionsubmit").submit(function(){
        event.preventDefault();
        alert($(this).html());
        $(this).ajaxSubmit({
            url: '/save-school-suggestion/',
            type: 'post',
            success: function(response){
                response = jQuery.parseJSON(response);
                // Check for login redirect.
//                if ( response.requireLogin ) {
//                    alert('Sign up or log in to save your answer');
//                } else {
                    $('.suggestionsubmit').dialog('close');
//                }
            }
        });
    });
});

    function add_fieldname(element, addto){
        var elementname = document.createElement('input');
        elementname.type = 'hidden';
        elementname.name = 'fieldname';
        elementname.value = element.attr('fieldname').replace(' ', '_');
        $(elementname).addClass('fieldname');
        addto.append(elementname);
    }

    function remove_hidden(element){
        $(element+' .fieldname').remove();
    }

But the file field isn’t showing up server side.

Why?

I found this in the documentation:

Why aren’t all my input values posted?
jQuery form serialization aheres closely to the HTML spec. Only successful controls are valid for submission.

But I don’t understand why my file control would be invalid.
I have another submission form in a different place on my site that is almost identical and works perfectly…

EDIT: this is the other form that does work (it has some extra stuff in it, but the form tag just has an id, like the problem one, and the input tags are the same).

<form id="photos-submission-form6">

    <input type="hidden" name="section" value="photos">
    <input type="hidden" name="school" id="photos-submit-school6">


    <div style="margin-bottom: .5em">
            <p style="position: relative; width:80%; font-size: 14px; display: inline" id="photos-anonymity-header6">Post as: null</p>
            <img id="helpicon6" src="/static/img/help-icon.png" style="float: right; cursor: pointer; padding-left:1em;">
            <div id="explanation6" style="display: none; padding:1em; background-color:white; border:2px solid gray; position: absolute;z-index:30; right:5px; top:5px">For more posting options, <a id="profilelink6" href="/profile/">fill out your profile</a></div>
        </div>
    <div id="photos-anonymity-select6" style="margin-bottom: .75em; width:412px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%; "></a></div>
    <input type="hidden" id="photos-anonymity-level6" name="anonymity-level" value="username">
        <span style="line-height: 40px;">
        <label class="photouploadlabel">URL</label><input type="text" name="image-url" style="width: 335px"><br>
        <label class="photouploadlabel">File</label><input type="file" name="image-file" style="width: 335px"><br>
        <label class="photouploadlabel">Caption</label><input type="text" id="image-caption6" name="image-caption" style="width: 335px; color: rgb(128, 128, 128); ">
        </span>


    <div style="height: 30px; margin-top: 1em; width: 413px;">
            <label id="photos-tagsbutton6" style="margin-right: .5em; cursor: pointer; vertical-align: bottom; float:left; line-height: 1.8em;">Tags</label>
        <input id="photos-tagsinput6" style="display: none;" type="text" name="tags">
        <button id="send-photos-suggestion6" disabled="" style="float:right; position: relative; bottom: 7px; right: -4px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true"><span class="ui-button-text">Post</span></button>
    </div>
    </form>

Answer 1

This is probably not the case but are sure there are no spelling mistake server side? like you would be using $_FILE instead of $_FILES? Could you post the relevant php also?

Also, definitely not an issue but it is recommended to close your input tags, now like this:

<input ... />