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.
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?
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.
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:
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.
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.
Reply With Quote
Bookmarks