I'm trying to understand an error...
I have a web app that allows users to upload CSVs. If the file type is not a CSV, nothing happens and the page simply displays "Invalid File Type."
If the user tries uploading an invalid file type and repeatedly clicks on the button that triggers the PHP file that handles the upload, the PHP file eventually becomes unresponsive and the site crashes with the following error:
"tcp_error: The Web Server may be down, too busy, or experiencing other problems preventing it from responding to requests. You may wish to try again at a later time"
I'm thinking this has to do with the fact that it's a persistent HTTP connection and that it's being overwhelmed by requests?
I'm wondering the precise source of this and the best fix to avoid a crash if the user repeatedly tries to upload an invalid file type.
HTML Excerpt:
<script type="text/javascript">
function stopUpload(success){
console.log(success);
var csv1 = success['csv1'];
var csv2 = success['csv2'];
var csv3 = success['csv3'];
var csv4 = success['csv4'];
var csvError = success['error'];
var id = success['id'];
$('.js-wf-error').text(csvError);
if (!csvError) {
runWF(id, csv1, csv2, csv3, csv4);
}
}
</script>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid
<form id="wf-form" class="js-wf-form" method="post" action="wf/csv-upload.php" enctype="multipart/form-data" target="upload_target">
<input type="file" name="csv1" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv2" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv3" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv4" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<a href="#" onclick="$(this).closest('form').submit(); return false;" type="submit"class="button redButton largeButton run-wf-button">Run Walking Farm</a>
</form>
csv-upload.php
(...upload handling...)
?>
<script language="javascript" type="text/javascript">
window.top.window.stopUpload(<?php print json_encode($returnData); ?>);
</script>
Try giving it a shot.It may work but not guaranteed: When uploading files via html form it can take several seconds before the form is successfully uploaded and the response page(PHP) shown. People can get impatient and click the Upload button several times which can result in duplicate form submissions or uploads. Usually it's really a problem & you might want to prevent this from happening. You can use javascript to handle it like this: The first step is to give your submit button a unique id, for example id="myButton":
<input type="submit" value="Submit" id="myButton" />
The second (and last) step is to give two Javascript commands to the tag. The first one will tell the browser to disable the submit button after the form has been submitted and the second one will change the button text to give the user some idea about what's happening. This is the code to add to your form tag:
onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Uploading to server, please wait...';"
Your form tag would then look something like:
<form action="wf/cs-vupload.php" method="post"
onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Uploading to server,please wait...';"
>
That's it. This trick should work in most modern browsers (IE 5+, FireFox, Opera, ...).
There is one more method of using cookies and these quick fixes will prevent multiple form submissions.Try this link :http://myphpform.com/prevent-multiple-form-submissions.php
Did, I missed something.glad to know if it is true.
Seems to me like the browser is timing out because your server is busy with all the other (upload) requests.
There is a jQuery method called one() that executes an event only once, which should solve this problem well.
For example:
<form id="wf-form" class="js-wf-form" method="post" action="wf/csv-upload.php" enctype="multipart/form-data" target="upload_target">
<input type="file" name="csv1" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv2" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv3" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv4" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<a href="#" id="submit_link" type="submit"class="button redButton largeButton run-wf-button">Run Walking Farm</a>
</form>
<script type="text/javascript">
$("#submit_link").one( "click", function() {
$("#wf-form").submit();
});
</script>
For completeness sake: If it was not a link but a button, you could simply disable the submit button in the onClick event (right after the submit()), to disallow submitting the files more than once.
You can use XMLHttpRequest Javascript class for ajax upload files and FormData for form class.
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
<form id="wf-form" class="js-wf-form" method="post" action="wf/csv-upload.php" enctype="multipart/form-data" target="upload_target">
<input type="file" name="csv1" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv2" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv3" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="file" name="csv4" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="hidden" value="1000000" name="MAX_FILE_SIZE">
<a href="#" onclick="fcsvUpload(); return false;" type="submit"class="button redButton largeButton run-wf-button">Run Walking Farm</a>
</form>
<script type="text/javascript">
function fcsvUpload(){
var oData = new FormData(document.getElementById("wf-form"));
var result = true;
var oReq = new XMLHttpRequest();
oReq.open("POST", "wf/csv-upload.php", false);
oReq.send(oData);
if (oReq.status === 200) {
return result;
} else {
return result;
}
});
</script>
You have error in html line with iframe. iframe tag isnt closed. Maybe because it doesnt work. Look:
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid