The links on my page don't work after uploading a large file using AJAX. They result in the infamous error "The requested URL was rejected. If you think this is an error, please contact the webmaster. Your support ID is..." (i.e. the file upload is successful, but links subsequently fail.)
I get this behaviour after uploading a large (19 MB) file, but not after uploading a small (100 K) file, and not after uploading no file. If I "Clear cookies for domain", it restores the expected behaviour. (The offending cookie might be called "TS0194eee0_0".)
The errant behaviour is the same in IE 11, FireFox 40.0, and BlackBerry browsers.
What am I doing wrong? Does something persist after the AJAX call is finished that I should be clearing? (I really don't want to do a "delete cookie" hack.) JQuery is not an option. My site is serviced in a "shared host" environment, so access to php.ini is out of the question.
upload1.html:
<!DOCTYPE html>
<html>
<head>
<script>
function startUpload()
{
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4 && ajax.status == 200)
{alert (ajax.responseText);}
};
ajax.open("POST", "/test/upload2.php");
ajax.send(new FormData(document.getElementById("form1")));
}
</script>
</head>
<body>
Absolute link<br />
Site relative link<br />
Document relative link<br />
<form id="form1" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1" /><br>
<input type="button" value="Start Upload" onclick="startUpload()" />
</form>
</body>
</html>
upload2.php:
<?php echo "Hello World!"; ?>
Update: As I suspected, deleting (expiring) the offending cookie solved the problem "for now", but for how long? I have no idea why cookie "TS0194eee0_0" is related to the problem, or if it will always have that name.
document.cookie = "TS0194eee0_0=; expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";
Related
I've been struggling with this for a while, and need some help.
I've managed to add a reCAPTCHA checkbox to my online form, but I'm stumped on what to do when it comes to the verification.
I've used the "Automatically render the reCAPTCHA widget" option as described in the Checkbox instructions.
But I'm getting stuck on the verification instructions.
My form code is pretty simple:
<form name="myForm" action="mail.php" onsubmit="return validateForm()" method="POST">
<div>
<label for="name">Name:</label><br /><input id="name" type="text" name="name" class="formthin" required />
</div>
<div>
<label for="email">Email:</label><br />
<input id="email" type="email" name="email" class="formthin" required />
</div>
<div>
<label for="message">Comments, Questions, Whatever:</label><br />
<textarea id="message" name="message" rows="4" cols="4" class="formbig" required></textarea>
</div>
<div>
<div class="g-recaptcha" data-sitekey="site-key"></div>
</div>
<div>
<input type="submit" value="Submit" class="formsubmit" />
</div>
</form>
I've added the following in between the "<head></head>" tags.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
So far everything looks good on the page.
For good measure, here is the code in the "mail.php" file:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent=" From: \n $name \n\n Message: \n $message";
$recipient = "my email address";
$subject = "Website Contact Form";
$mailheader = "From: $email \r\n";
$forward = 1;
$location = "url of thank you page";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
if ($forward == 1) {
header ("Location:$location");
}
else {
echo "Thank you message.";
}
?>
This is where I need help.
I'm not sure which of the three options for verification I should use, how to implement the choice, or where the code for the API Response should go.
For instance, if I use the first option, does the "g-recaptcha-reponse" POST parameter go inside my initial <form> tag? The notes on the API Request seems to indicate that I need a second POST method. I'm not sure how to combine or implement it with my current one.
Does the API Response code go in my "mail.php" file? Or in between "<script></script>" tags on my form page? (in the head or below the form?)
Where does my "Secret Key" come into play? I don't see any instructions on how to include it.
I've looked through the forum and found a previous question that seem to be related:
"Google reCaptcha v2 (Checkbox) Verification"
The original posted code looks very similar to mine. (both on the html page, and the php action script)
The reply was a second php script that looks like it includes the Secret Key, but with no instructions on where that php code should go. Do I place it in the file with the form? Is it added or does it replace the mail.php action script? And if it replaces the script, how is the response from the actual form handled?
Any help would be appreciated.
Thank you.
++++++++++++++++++++++++++
I have followed the instructions from the link sent by #Bazaim.
These are the steps I took:
Downloaded the "recaptcha-master" folder and added it to my website directory.
ran the "composer" installation scripts in my Terminal.
Moved the "composer.phar" file into the "recaptcha-master" folder.
Added the following to the "composer.json" file:
"require": {
"google/recaptcha": "^1.2"
}
Added the "require_once..." script to the bottom of my "mail.php" file like this:
setExpectedHostname('my-domain-name.com')
->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
// Verified!
} else {
$errors = $resp->getErrorCodes();
}
?>
So far so good. When I go to my form, and click the "checkbox" for I am not a robot, I am prompted to do the image identify thing and get the green "check" next to "I am not a Robot."
However, when I submit my form, my "mail.php" no longer functions. It tries to load in the browser window rather than send me an email.
In addition, the reCAPTCHA checkbox is not "required" to hit submit.
I got it to work. Here's what I ended up doing:
Removed the extra PHP script from my mail.php file. (the "require_once" content mentioned in the previous posts) My PHP script was working before I added that, so I wanted to get it back to a working version.
I tried to make the reCAPTCHA a requirement so I did another search and found instructions on adding javascript and css and added it to the code on my page. (this was one of the things I was trying to solve in my original post)
JavaScript:
window.onload = function() {
var $recaptcha = document.querySelector('#g-recaptcha-response');
if($recaptcha) {
$recaptcha.setAttribute("required", "required");
}
};
CSS:
#g-recaptcha-response {
display: block !important;
position: absolute;
margin: -78px 0 0 0 !important;
width: 302px !important;
height: 76px !important;
z-index: -999999;
opacity: 0;
}
Added to the <head></head> code on my contact page.
Bingo - everything is working.
I'm not sure if the verification information is actually being used. (The other thing I was trying to figure out in my original post) And now I'm not sure if it's actually necessary. reCAPTCHA is required in the form, the form is submitting.
Anyway, thanks to #Bazaim for the help and getting me on track.
Hope this helps anyone else who might be having problems with this.
I am integrating NoCaptcha to a website and want to catch failed captchas myself. Sadly, the "image selection" Captcha reloads immediately if it was not correctly solved.
So, if there is a challenge like "Pick all images showing coffee" and a user does not select all corresponding images correctly, the challenge reloads immediately. But I want the data (and form) to be posted anyway and check the Captcha correctness on my own.
Here is a minimalistic example of how it should work. I am sure, it would work, if the Captcha not reloaded instantly.
<?php
require_once('recaptchalib.php');
$publickey = "-----";
$privatekey = "-----";
try{
if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
if(!$captcha){ exit; }
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$privatekey."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($response.success==false){
// Do something
} else {
// Do something else
}
}
else
{
?>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method="post" action="thisfile.php">
<div class="g-recaptcha" data-sitekey="<?php echo $publickey; ?>"></div>
<input type="submit" value="Absenden" />
</form>
</body>
</html>
<?php
}
} catch (Exception $e) {
error_log($e->getMessage());
}
?>
Do you know a way to prevent auto-reloading?
Thank you!
You should know operations behind reCaptcha. The Google reCaptcha API (https://www.google.com/recaptcha/api.js) does all the work for reCaptcha operation; allowing no site owner interactions (except the site verify) with its reCaptcha.
So your attempts to prevent reCaptcha auto-reloading or similar whether break its operation or cause its misbehave toward end user.
Is there a way to upload file using pure prototype and ajax. I've searched for it on google but did't got any satisfactory result. Can anyone please help me out??
The easiest way to get an "Ajax" file upload to work is to use a keyhole iframe as the target for your form:
<form action="handler/url" enctype="multipart/form-data" target="keyhole" method="post">
<input type="file" multiple name="user_file[]" />
<input type="submit" id="upload" value="Upload">
</form>
<!-- style the following to be tiny/hidden -->
<iframe id="keyhole" src="about:blank"></iframe>
The trick with this is to show a waiting indicator, and hide it after the upload is complete.
<div id="waiting" style="display:none"></div>
<script type="text/javascript">
$('upload').observe('click', function(evt){
$('waiting').show();
});
</script>
In your file upload handler, return a text/javascript header and the following script after a successful upload:
var waiting = top.document.getElementById('waiting');
if(waiting) waiting.style.display = 'none';
Naturally, this will only work if both endpoints are on the same server, owing to Same Origin Policy.
I have a simple HTML page and i would like to upload a file from client machine to server side, here i am trying to upload a file using Kendo UI contorl, but it doesn't work fine, i have given my code details below.
Included JS file is "kendo.all.min.js" and respected CSS files,
Code used for upload,
$("#btnUpload").kendoUpload({
async: {
saveUrl: 'http://localhost:8080/Project1/Cifernet/upload/',
autoUpload: false
},
multiple: true,
localization: {
select: 'Select a file',
uploadSelectedFiles: 'Send',
error: onError
}
});
FYI: i got below error from Mozilla console while uploading a file.
[10:04:33.900] Use of getPreventDefault() is deprecated.
Use defaultPrevented instead. # http://localhost:8080/Project1/Scripts/jquery-1.8.3.js:3255
[10:04:34.193] GET http://localhost:8080/Project1/Styles/textures/highlight.png [HTTP/1.1 404 Not Found 0ms]
--
[10:04:40.506] POST http://localhost:8080/Project1/upload/POST [HTTP/1.1 404 Not Found 0ms]
[10:04:40.507] GET http://localhost:8080/Project1/Styles/Images/loading.gif [HTTP/1.1 404 Not Found 0ms]
[10:04:40.467] "Server response: <html><head><title>Apache Tomcat/6.0.18 - Error report</title><style><!--H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}HR {color : #525D76;}--></style> </head><body><h1>HTTP Status 404 - /Project1/upload/POST</h1><HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b> <u>/Project1/upload/POST</u></p><p><b>description</b> <u>The requested resource (/Project1/upload/POST) is not available.</u></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/6.0.18</h3></body></html>"
[10:04:40.511] GET http://localhost:8080/Project1/Styles/textures/highlight.png [HTTP/1.1 404 Not Found 0ms]
Any one Please help me to resolve this problem or please suggest best jQuery plugin with working example to upload files to the server.
Try this example to illustrate your problem
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="configuration">
<span class="infoHead">Information</span>
<p>
The Upload can be used as a drop-in replacement
for file input elements.
</p>
<p>
This "synchronous" mode does not require
special handling on the server.
</p>
</div>
<form method="post" action="submit" style="width:45%">
<div class="demo-section">
<input name="files" id="files" type="file" />
<p>
<input type="submit" value="Submit" class="k-button" />
</p>
</div>
</form>
<script>
$(document).ready(function() {
$("#files").kendoUpload();
});
</script>
</div>
</body>
</html>
There is a good demo on the telerik site:
http://demos.telerik.com/aspnet-mvc/upload/async
The code below is from that demo site.
In razor your GUI code would be:
#(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("Save", "Upload")
.Remove("Remove", "Upload")
.AutoUpload(true)
)
)
and then you would make an Upload controller, the Save method would look like:
public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
{
// The Name of the Upload component is "files"
if (files != null)
{
foreach (var file in files)
{
// Some browsers send file names with full path.
// We are only interested in the file name.
var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
// The files are not actually saved in this demo
// file.SaveAs(physicalPath);
}
}
// Return an empty string to signify success
return Content("");
}
as you can see the ~/App_Data is the path to your file, which I think is what you were after.
I try to send an ajax post with URLs but it returns 403 forbidden, it works on my localhost but it does not work when deployed online (LAMP)
Form Code
<form id="Links">
<input type="url" name="link1" id="link1" />
<input type="url" name="link2" id="link2" />
<input type="button" value="submit" id="submitLink" />
</form>
Jquery Code
$(document).ready(function()({
$("#submitLink").click(function(){
$.post("http://mysite.com/mycontroller/myfunction", $("#Links").serialized(), function(data){
alert("success!");
});
});
});
PHP CI Function
public function myfunction()
{
print_r($this->input->post());
die();
}
Viewing the ajax post on firebug console.. it shows 403 forbidden.. in online deployment.. but it works on localhost.
P.S.
My global xss filtering in config is set to false
Their are following things which need to be consider.
Check the controller and method is present
Is any restriction applied through .htaccess
Check file permissions for reading and writing.