My server returns status code for upload (201) with empty body. I can upload data to server but then onComplete callback is fired i get
Error when attempting to parse xhr response text (SyntaxError: Unexpected end of input)
FineUploader expects JSON response which i did not provide, is there any way (except manualy modify FinneUploader JS file) to tell FineUploader not to attempt parse response and just check for valid status?
No. You will find that relying on status codes will cause you problems in IE9 and older, since a form inside a hidden iframe is submitted for each file in those browsers, and there is no way, via javascript, to determine the response code for such a request.
Related
Can I send a file as multipart by XMLHttpRequest to a servlet?
I am making a form and submitting it as multipart, but somehow I am not getting a response for successfully uploading it. I do not want the page to be refreshed, so it has to take place by Ajax.
That's only possible with the XHR FormData API (previously known being part of as "XHR2" or "XHR Level 2", currently known as "XHR Advanced Features").
Given this HTML,
<input type="file" id="myFileField" name="myFile" />
you can upload it as below:
var formData = new FormData();
formData.append("myFile", document.getElementById("myFileField").files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "myServletUrl");
xhr.send(formData);
XHR will take care about proper headers and request body encoding and the file will in this example be available on the server side as form-data part with the name myFile.
You need to keep in mind that FormData API is not supported in older browsers. At caniuse.com you can see that it's currently implemented in Chrome 7+, Firefox 3.5+, Safari 5+, Internet Explorer 10+ and Opera 12+.
In case you're using jQuery, then you might be tempted to use its $.val() function as below:
formData.append("myFile", $("#myFileField").val());
But this is incorrect as it doesn't return the whole File object, but merely the file name as String which is utterly useless as it doesn't contain the file contents.
If you don't want to use document.getElementById() for some reason, then use one of the following instead:
formData.append("myFile", $("#myFileField").prop("files")[0]);
formData.append("myFile", $("#myFileField")[0].files[0]);
An alternative is to use the jQuery Form plugin. Your entire form, when written and functioning properly without any line of JavaScript code, will then instantly be ajaxified with just the following line:
$("#formId").ajaxForm(function(response) {
// Handle Ajax response here.
});
It also supports file uploads as well by a hidden iframe trick. See also this jQuery Form documentation for an in-depth explanation. You may only need to change the servlet code to be able to intercept on both normal (synchronous) and Ajax (asynchronous) requests. See also this answer for a concrete example: Simple calculator with JSP/Servlet and Ajax
Either way, the uploaded file should then be available in the doPost() method of a #MultipartConfig servlet as follows:
Part myFile = request.getPart("myFile");
Or if you're still on Servlet 2.5 or older, use Apache Commons FileUpload the usual way. See also this answer for a concrete example: How can I upload files to a server using JSP/Servlet?
It's not possible to send multipart/form-data with XMLHttpRequest (though it is possible in modern browsers, with XHR2. See BalusC's answer).
A common way to achieve what you want is to use a regular form, but in an iframe instead. This way, only the iframe is refreshed on upload.
I have this simple page that just needs to show contents that is loaded from an external url (ajax request, response in json format)
I should say I'm a AngularJS newbie.
I've googled a bunch and found different ways of doing this and couldn't manage to determine which is the correct/simple/up-to-date way to achieve this.
My 2 challenges -
Making the AJAX request run on startup (I can load the page before that happens and just load the contents one the ajax request finishes. Maybe show a 'Loading..' indicator)
Doing a ajax request correctly.
Here is my attempt. I know that the ajax request is never made because its not setup correctly.
You are getting into .error function:
http://jsbin.com/oDUsuVA/3/edit
For jsonp your response should be something like:
callback([
{
"title":"License Title 1",
"licenseUrl":"http://cnn.com",
"licenseText": " test"
}]);
Edit:
You can simply do .get() request too, but if you had to use jsonp request interface, you would have to correct response.
A Jsonp request always wraps the logic into a json callback wrapper function.
I just did $http.get instead of your $http.jsonp and it did work for me.
Manual Uploader Working Fine with All Browser expect IE 10, i am not getting correct Response From the Server it is Showing on onComplete "No Valid message Received from Loaded iframe For i frame Name 1_97604 cec......".
File are uploading into the cloudbees server but not getting correct Response From the server.
In case of Other browser i am getting Response.success = true, but For IE 10 its undefined, how to handle this error. Please help me Out for this.
Regards
Yogesh
You aren't using IE10 if that is the message you are seeing. Most likely, you are using IE9 or older. The message you are seeing is logged by the form uploader, which is never used if you are uploading via IE10. Perhaps you are running IE10 in IE9 or IE8 mode. Either way, the message indicates that you are working in a cross-origin environment (you have set the cors.expected option to true) but are not returning the proper response from your server. Note that older browsers, such as IE9 and older, utilize form submits, targeting an iframe, to upload files. In order to access the contents of that cross-origin iframe, the iframe needs to post a message containing the server response to Fine Uploader's window. This is all very easy to do, all you need to do is return a text/html response from your server that looks something like this:
"{\"success\": true, \"uuid\": \"9da17ad5-ad6a-40cd-81b5-226e837db45b\"}<script src=\"http://<YOUR_SERVER_DOMAIN>/iframe.xss.response-<VERSION>.js</script>.js\"></script>"
The javascript file mentioned in the script tag is provided in the Fine Uploader released zip file. It does all of the work for you. You must return a JSON response before the script tag, as illustrated above, and the response must include the UUID of the associated file.
You should read about cross-origin support either in the associated blog post.
I'm evaluating Canoo Webtest for automated integration/functional testing as a Grails plugin.
I have a REST app which I'm attempting to test, but Canoo Webtest doesn't seem to properly send the JSON data in POST request. My test code is like below
invoke( description:"Add a product to shopping cart",
url:'shoppingCart/add', method:'POST',
content:'{"class":"shop.service.Product", "name":"A product", "description":"Manufactured by X", "price":99.9}'
//contentFile: '../product.json'
)
The request body is empty no matter whether I use contentFile approach or inline the data as content attribute. The test report shows the data as being sent correctly, but error page shows an error stating 'JSONException: Missing value. at character 0 of '. JSON data as a response of GET request is coming back fine.
I have tested the same functionality with curl and it works perfectly fine. Is there something I'm missing in the Canoo Webtest setup?
Thanks.
EDIT: I'm using Grails 1.3.7 in case that makes any difference
OK. I started to just experiment with the invoke() and seems that setting attribute soapAction value to true does the trick.
I have no clue why this works. The documentation of invoke() for the attribute says
soapAction
Required? no
If the HTTP method is POST and is in fact a SOAP POST request,
this allows the SOAP Action header to be set. Ignored for GETs.
Apparently it sets some needed request header. Haven't checked which one.
Thank you for reading :)
Cannot yet mark this answer as the correct one, but will do so when it's possible.
Here is my situation:
Im creating a widget that site admins can embed in their site and the data are stored in my server. So the script basically has to make an ajax request to a php file in my server to update the database. Right? Right :)
The ajax request works excellent when i run it in my local server but it does not work when the php file is on my ONLINE server.
This is the code im using:
var url = "http://www.mydomain.net/ajax_php.php";
var params = "com=ins&id=1&mail=mymail#site.net";
http.async = true;
http.open("POST", url, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
//do my things here
alert( http.responseText );
}
}
http.send(params);
In firebug it shows: http://www.mydomain.net/ajax_php.php 200 OK X 600ms.
When i check the ajax responnseText I always get a Status:0
Now my question is: "Can i do cross-domain ajax requests by default? Might this be a cross-domain ajax problem? Since it works when the requested file resides in my local server but DOESN'T work when the requested file is in another server, im thinking ajax requests to another remote server might be denied? Can you help me clear on this?
Thanks..
Cross-domain requests are not directly allowed. However, there is a commonly-used technique called JSONP that will allow you to avoid this restriction through the use of script tags. Basically, you create a callback function with a known name:
function receiveData(data) {
// ...
}
And then your server wraps JSON data in a function call, like this:
receiveData({"the": "data"});
And you "call" the cross-domain server by adding a script tag to your page. jQuery elegantly wraps all of this up in its ajax function.
Another technique that I've had to use at times is cross-document communication through iframes. You can have one window talk to another, even cross-domain, in a restricted manner through postMessage. Note that only recent browsers have this functionality, so that option is not viable in all cases without resorting to hackery.
You're going to need to have your response sent back to your client via a JSONP call.
What you'll need to do is to have your request for data wrapped in a script tag. Your server will respond with your data wrapped in a function call. By downloading the script as an external resource, your browser will execute the script (just like adding a reference to an external JS file like jQuery) and pass the data to a known JS method. Your JS method will then take the data and do whatever you need to do with it.
Lots of steps involved. Using a library like jQuery provides a lot of support for this.
Hope this helps.