www.webdeveloper.com
Results 1 to 6 of 6

Thread: The file input goes blank when trying to submit form

Hybrid View

  1. #1
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582

    The file input goes blank when trying to submit form

    Hello, everyone.

    I have one document that resides in an iFrame, and it contains anywhere from 1 to 4 forms, depending. There is a dynamic content area that will display between zero and three forms, each named uniquely, associated with files that exist in a database. Regardless of the number of forms associated with a file, at the bottom of the document is one last form named NewDoc - this last form is used for uploading a new file into the database, or replacing a file.

    With one exception, this is working flawlessly.

    The user is supposed to choose a file for upload, use a SELECT input to say what document type it is, then click on the submit button.

    What is actually happening, however, has me confuzzed. When the submit button is clicked the first time, the value of the input="file" element becomes blank and nothing happens. If a file is chosen, again, and the submit button clicked, it uploads with no problem and the database does what it's supposed to. But if I refresh the document and try, again, same thing - the file disappears from the form element and the form does not submit.

    First, the forms (all three, just in case):
    Code:
    <form name="updateDocs_1" id="updateDocs_1" method="post" style="margin:0px; padding:0px; border:0px;"
        action="supplier_docs.cfm?vid=122" enctype="multipart/form-data">
        <tr>
            <td class="field field-bottom odd-row" style="width:16px; min-width:16px; max-width:16px;"><img src="images/Excel.gif" height="16" width="16" /></td>
            <td class="field field-bottom odd-row" style="width:209px; min-width:209px; max-width:209px;"><a href="supplier_docs_open.cfm?fid=49" style="color:blue;">ThisFile.xls</a></td>
            <td class="field field-bottom odd-row" style="width:110px; min-width:110px; max-width:110px;"><select name="docType" id="docType" onChange="this.form.submit();"><option value="1">Executive Summary</option><option value="2" SELECTED>Supplier Proposals</option><option value="3">Supplier Information</option><option value="4">Financial Information</option></select></td>
            <td class="field field-bottom odd-row" style="width:105px; min-width:105px; max-width:105px;">Dec 08,2010</td>
            <td class="field field-bottom odd-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom odd-row" style="width:105px; min-width:105px; max-width:105px;">Dec 21,2010</td>
            <td class="field field-bottom odd-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom odd-row" style="width:65px; min-width:65px; max-width:65px;"><input type="checkbox" name="replaceFile" id="replaceFile" value="49" onClick="if(this.checked){setReplaceFileID(this.form.name,this.value);}" /></td>
            <td class="field field-bottom odd-row" style="width:65px; min-width:65px; max-width:65px;"><a href="details_supplier_docs_email.cfm?fid=49" onClick="parent.openNew(this.href,'new1'); return false;" style="color:blue;">Attach</a></td>
            <td class="field field-bottom field-end odd-row"><input type="checkbox" name="deleteRecord" id="deleteRecord" value="49" onClick="return RUSureFileDelete(this.form.name,'Accenture.xls');" /></td>
        </tr><input type="hidden" name="fileId" id="fileId" value="49" />
    </form>
    
    <form name="updateDocs_2" id="updateDocs_2" method="post" style="margin:0px; padding:0px; border:0px;"
        action="supplier_docs.cfm?vid=122" enctype="multipart/form-data">
        <tr>
            <td class="field field-bottom even-row" style="width:16px; min-width:16px; max-width:16px;"><img src="images/pdf.gif" height="16" width="16" /></td>
            <td class="field field-bottom even-row" style="width:209px; min-width:209px; max-width:209px;"><a href="supplier_docs_open.cfm?fid=46" style="color:blue;">ThatFile.pdf</a></td>
            <td class="field field-bottom even-row" style="width:110px; min-width:110px; max-width:110px;"><select name="docType" id="docType" onChange="this.form.submit();"><option value="1">Executive Summary</option><option value="2">Supplier Proposals</option><option value="3">Supplier Information</option><option value="4" SELECTED>Financial Information</option></select></td>
            <td class="field field-bottom even-row" style="width:105px; min-width:105px; max-width:105px;">Dec 01,2010</td>
            <td class="field field-bottom even-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom even-row" style="width:105px; min-width:105px; max-width:105px;">Dec 08,2010</td>
            <td class="field field-bottom even-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom even-row" style="width:65px; min-width:65px; max-width:65px;"><input type="checkbox" name="replaceFile" id="replaceFile" value="46" onClick="if(this.checked){setReplaceFileID(this.form.name,this.value);}" /></td>
            <td class="field field-bottom even-row" style="width:65px; min-width:65px; max-width:65px;"><a href="details_supplier_docs_email.cfm?fid=46" onClick="parent.openNew(this.href,'new2'); return false;" style="color:blue;">Attach</a></td>
            <td class="field field-bottom field-end even-row"><input type="checkbox" name="deleteRecord" id="deleteRecord" value="46" onClick="return RUSureFileDelete(this.form.name,'Accenture_Email_Policies.pdf');" /></td>
        </tr><input type="hidden" name="fileId" id="fileId" value="46" />
    </form>
    
    <form name="updateDocs_3" id="updateDocs_3" method="post" style="margin:0px; padding:0px; border:0px;"
        action="supplier_docs.cfm?vid=122" enctype="multipart/form-data">
        <tr>
            <td class="field field-bottom odd-row" style="width:16px; min-width:16px; max-width:16px;"><img src="images/PowerPoint.gif" height="16" width="16" /></td>
            <td class="field field-bottom odd-row" style="width:209px; min-width:209px; max-width:209px;"><a href="supplier_docs_open.cfm?fid=48" style="color:blue;">SomePowerPoint.pptx</a></td>
            <td class="field field-bottom odd-row" style="width:110px; min-width:110px; max-width:110px;"><select name="docType" id="docType" onChange="this.form.submit();"><option value="1">Executive Summary</option><option value="2">Supplier Proposals</option><option value="3" SELECTED>Supplier Information</option><option value="4">Financial Information</option></select></td>
            <td class="field field-bottom odd-row" style="width:105px; min-width:105px; max-width:105px;">Dec 01,2010</td>
            <td class="field field-bottom odd-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom odd-row" style="width:105px; min-width:105px; max-width:105px;">Dec 08,2010</td>
            <td class="field field-bottom odd-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom odd-row" style="width:65px; min-width:65px; max-width:65px;"><input type="checkbox" name="replaceFile" id="replaceFile" value="48" onClick="if(this.checked){setReplaceFileID(this.form.name,this.value);}" /></td>
            <td class="field field-bottom odd-row" style="width:65px; min-width:65px; max-width:65px;"><a href="details_supplier_docs_email.cfm?fid=48" onClick="parent.openNew(this.href,'new3'); return false;" style="color:blue;">Attach</a></td>
            <td class="field field-bottom field-end odd-row"><input type="checkbox" name="deleteRecord" id="deleteRecord" value="48" onClick="return RUSureFileDelete(this.form.name,'Accenture Mockups.pptx');" /></td>
        </tr><input type="hidden" name="fileId" id="fileId" value="48" />
    </form>
    Now, JavaScript currently in place:
    Code:
    function setReplaceFileID(fn,v) {
        //function to set fileId value to upload document form for replacement of file data
        var df = document[fn];
        var fArray = document.getElementsByTagName("form"); // get all form names to loop through
        var fAlen = fArray.length;
        for(var i=0;i<fAlen;i++) {
            var thisName = fArray[i].name;
            if(thisName.indexOf("updateDocs") > -1) { // if it's one of the update forms
                if(thisName == df.name) {
                    if(document[thisName].replaceFile.checked == true) {
                        document.NewDoc.replaceFile.value = v;
                        document.NewDoc.documentToStore.click();  //This only works in IE browsers
                        document.NewDoc.docType.focus();
                        }
                    else {
                        document.NewDoc.replaceFile.value = "";
                        }
                    }
                else {
                    document[thisName].replaceFile.checked = false;
                    }
                }
            }
        }
    
    function allRequired() {
        var df = document.NewDoc;
        if(df.documentToStore.value.length > 0) {
            var ft = df.documentToStore.value;
            var ftArray = ft.split(".");
            var ftALen = ftArray.length;
            ft = ftArray[ftALen-1];
            switch(ft) {
                case "doc":
                case "docx":
                case "xls":
                case "xlsx":
                case "ppt":
                case "pptx":
                case "pdf":
                    // Do nothing - it's a valid file type
                break;
                default:
                    alert("Selected file is not a valid file type\n  (Word, Excel, PowerPoint, PDF)");
                    df.submitBtn.disabled = "disabled";
                break;
                }
            }
        if((df.documentToStore.value != "") && (df.docType.selectedIndex != 0)) {
            df.submitBtn.disabled = false;
            }
        else {
            df.submitBtn.disabled = "disabled";
            }
        }
    Any ideas on what could be causing the file field to go blank when the submit button is clicked for the first time? Why it works okay on subsequent clicks if the form is not refreshed or reloaded?

    Thanks,

    ^_^
    Last edited by WolfShade; 12-21-2010 at 03:05 PM.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Not enough room in the first post for everything. Here's the form at the bottom of the document.

    Code:
    <form name="NewDoc" id="NewDoc" action="supplier_docs.cfm?vid=122" 
        method="post" enctype="multipart/form-data">
        <table width="100&#37;" border="0" cellpadding="0" cellspacing="0" hspace="0" vspace="0" style="height:30px; background-color:#e6f7ff;">
            <tr>
                <td style="width:30%; text-align:right;">Document Type:&nbsp;<select name="docType" id="docType" onChange="return allRequired();"><option value="">      - Select -</option><option value="1">Executive Summary</option><option value="2">Supplier Proposals</option><option value="3">Supplier Information</option><option value="4">Financial Information</option></select>&nbsp;</td>
                <td style="width:55%; text-align:left;">&nbsp;Document to store:&nbsp;<input type="file" name="documentToStore" id="documentToStore" onChange="return allRequired();" style="width:320px;" /></td>
                <td style="width:15%; text-align:right;"><input name="submitBtn" type="submit" disabled="true" id="submitBtn" value="Add Document" />&nbsp;</td>
            </tr>
        </table>
        <input type="hidden" name="replaceFile" id="replaceFile" value="" />
    </form>
    ^_^

  3. #3
    Join Date
    Dec 2010
    Posts
    3
    I'm having the same problem with a form in an iframe. Chrome and Firefox work fine but IE7/8 fail in the manner you describe. I have not found a solution yet.

  4. #4
    Join Date
    Dec 2010
    Posts
    3
    I should add that this form used to work with a static input type=file. I'm now using jquery-custom-file-input.js and taking the result and adding it back into the form using this code:

    $('#uploadchooser').file().choose(function(e, input) {
    input.attr('name', 'fileupload');
    input.attr('id', 'fileupload');
    $('<div id="uploadtxt">Uploaded file selected: <strong>' + input.val() + '</strong></div>').insertBefore('#filters');
    $(input).appendTo("#uploadtxt");
    });

    The resulting $_FILES array (after the second click on Submit):
    Array
    (
    [fileupload] => Array
    (
    [name] =>
    [type] =>
    [tmp_name] =>
    [error] => 4
    [size] => 0
    )
    )

  5. #5
    Join Date
    Dec 2010
    Posts
    3
    I never did find an actual solution to this problem. Everything I tried was met with failure.

    However, I did find a workaround for my particular problem. The jquery file upload script uses posX and posY to position an invisible file input element under the cursor whenever it is over an attached button so that when you click, you are clicking the upload box. This didn't work correctly with thickbox but when I switched to fancybox, it worked properly in IE.

    Because of this, I was able to avoid the method of simulating a click on the element which created the bug in this thread. I spent WAY too much time on this one.

  6. #6
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    My issue was due to the fact that I was using (the IE only) .click() as a result of a checkbox (the user clicks a checkbox for "replace file" and the dialog automatically appears.)

    When I removed the .click() part of it, I had no problems.

    I didn't get what I wanted, but it works.

    ^_^

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles