function uploadFile(){
var file = $("file1").files[0];
var formdata = new FormData(); formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "upload.php";
ajax.send(formdata);
}
Error1: Unable to get value of the property '0': object is null or undefined
Error2: ForData not supported.
The FormData API is not supported by IE8 or IE9. It was only added in IE10. If you want to support these old browsers, then you cannot use modern HTML5 APIs.
There is a jQuery Forms plugin which does work in old IE versions and can allow you to upload files via ajax. I've used it myself and it is very effective. You can download it here: http://malsup.com/jquery/form/. You will probably need to rewrite your code a fair bit in order to use it as it's quite different conceptually to the HTML5 FormData API, but at least you'll get something that will work across all the browsers you want to support.
You could also try looking to see if there's a polyfill for FormData which would allow you to keep using your existing code. A quick google turned up this one, which I found listed here. I haven't tried it so can't vouch for it, but the polyfills listed by Modernizr on that list are generally pretty good.
Related
I compiled my reactjs using webpack and got a bundle file bundles.js. My bundles.js contains a component that make API calls to get the data.
I put this file in my html and pass the url to phantom.js to pre-compile static html for SEO reasons.
I am witnessing something strange here, the ajax calls for APIS are not getting fired at all.
For example, I have a component called Home which is called when I request for url /home. My Home component makes an ajax request to backend (django-rest) to get some data. Now when I call home page in phantomjs this api call is not getting fired.
Am I missing something here?
I have been using React based app rendering in Phantomjs since 2014. Make sure you use the latest Phantomjs version v2.x. The problems with Phantomjs occur because it uses older webkit engine, so if you have some CSS3 features used make sure they are prefixed correctly example flexbox layout.
From the JS side the PhantomJS does not support many newer APIs (example fetch etc.), to fix this add the polyfills and your fine. The most complicated thing is to track down errors, use the console.log and evaluate code inside the Phantomjs. There is also debugging mode which is actually quite difficult to use, but this could help you track down complex errors. I used webkit engine based browser Aurora to track down some of the issues.
For debugging the network traffic, try logging the requested and received events:
var page = require('webpage').create();
page.onResourceRequested = function(request) {
console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function(response) {
console.log('Receive ' + JSON.stringify(response, undefined, 4));
};
Using data URI in links (<a href="data:) is not supported in IE and Microsoft Edge (Data URI link <a href="data: doesn't work in Microsoft Edge).
I'm trying to use Modernizr to detect data URI in links support.
Modernizr.datauri is not quite what I'm looking for, as it does not tell anything about support data URI in links, e.g. for Microsoft Edge it returns object {over32kb: true}
How can I detect using Modernizr if data URI in links is supported in browser?
I had the same need for feature detection but I am not using Modernizr. My use case is that I'm generating a pdf on the client side with the makePDF library and was not able to open the PDFs using data URIs in IE or Edge. Unfortuantely, all the feature detection scripts I could find were testing for support of data URIs for images (which is supported by MS browsers) so I had to write my own. Here's the code (thanks to BoltClock's comment above for the idea):
checkDataURISupport(function (checkResult) {
if (checkResult) {
alert('Files in data URIs are supported.');
} else {
alert('Files in data URIs are NOT supported.');
}
})
function checkDataURISupport(callback) {
try {
var request = new XMLHttpRequest();
request.onload = function reqListener() {
callback(true);
};
request.onerror = function reqListener() {
callback(false);
};
request.open('GET', 'data:application/pdf;base64,cw==');
request.send();
} catch (ex) {
callback(false);
}
}
checkDataURISupport()
I tested in in IE 11, Edge 25, Firefox 46, and Chrome 49.
As a side note, another SO answer (https://stackoverflow.com/a/26003382/634650) suggested using:
supportsDataUri = 'download' in document.createElement('a');
This works in IE but not Edge.
Update
The SO answer above also includes a link to a SO answer referencing a Modernizr issue about feature detection for data URI in iframe support. Opening a data URI in an iframe is basically the same thing as opening one in a new windows and the Microsoft browsers which do not support data URIs in iframes don't support opening them in new windows. Additionally, the test for the iframe support mentioned in those locations is synchronous so I would recommend using it instead of my async solution.
It is weird that even Microsoft Edge is not supporting the data URI. Older versions of IE only allows base64 encoded images of up to 32KB. I had come across a reference link lately which relates to the similar issue you have mentioned with Moderinzr.
Does modernizr check for data uri's?#294
It appears they have added a patch for the issue. It is a data URI test.
This post has the similar answer regarding the issue. I hope these fixes should work throughout.
I am trying to use object-oriented code to handle an AJAX upload. When I run the code, it sees the file, creates the XMLHttpRequest object, but I cannot seem to get the progress event to fire. The full source of my code can be found here: http://pastebin.com/89QawbS6
Here is a snippet:
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", MyObj.trackProgress, false);
xhr.open("POST", url, true);
...
Then in that same object, different method:
trackProgress: function (event) {
console.log(event);
// stuff that should calculate percent
}
But that console.log(event) never fires.
Please note: I know jQuery is great, and there are a dozen awesome upload plugins that I could just use instead. I am not doing this for a class or homework, I just want to understand the process better myself. So offering a jQuery plugin as an answer is not what I'm looking for. I'm trying to make myself less dependent on jQuery.
This FF bug might be the reason for your issue. It's reported on MacOSX and another similar bug on Linux. I don't know if that matters but I tested on Windows. I still believe that your code is fine.
I have a local build of my site running at local.mydomain.com. I'm making ajax requests to api.mydomain.com which is running on an AWS server and returns JSON. In Chrome, I can call the API no problem. But in IE, I get Access Denied.
After researching, it seems to be a cross-(sub)domain restriction. But I was under the impression that this restriction would apply to both browsers. Can anybody see what might be going wrong here and why it might work in some browsers and not others?
It looks like the problem was in the transport object that IE8+ wants you to use. jQuery uses either ActiveXObject (for IE) or XMLHttpRequest (all others), but IE 8 and above requires XDomainRequest for ajax.
What you can do is return a custom xhr object via $.ajaxSettings.xhr like this,
// override xhr for browser that use XDR
if ('XDomainRequest' in window && window.XDomainRequest !== null) {
// override default jQuery transport
jQuery.ajaxSettings.xhr = function() {
try { return new XDomainRequest(); }
catch(e) {
console.log('test');
}
};
// also, override the support check
jQuery.support.cors = true;
}
I pulled this code from a discussion on the subject here:
http://graphicmaniacs.com/note/getting-a-cross-domain-json-with-jquery-in-internet-explorer-8-and-later/
Definitely take a look at that if you think you're experiencing the same problem.
Firebug is giving me the following error:
ActiveXObject is not defined
[Break on this error] var xmlhttp = new ActiveXObject("MSXML2.XmlHttp");
I've read that ActiveX is a Microsoft framework and its mostly used in IE. All of the internal web pages at the place I work were designed and built specifically for IE 6, but now they want me to research what it would take to move to Firefox and Safari and other major browsers... and ActiveX does not work in Firefox.
So how do I get the ActiveX stuff to work in Firefox and Safari specifically on Mac (for starters)? I know there is a couple of plugins? that have made things easier... like FF ActiveX Host... but is there a programmatic solution to this?
If there is no solution, no plugin, for this problem, is it possible to rewrite the ActiveX pieces in Java?
I’m not a web guy but it seems like your web pages use AJAX.
So your problem is not using AcitveX in other browsers.
Try something like this:
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlhttp = false;
}
}
}
The Plugin-API nearly every relevant browser besides IE supports is the NPAPI, see e.g. this introduction.
I am not aware of any transparent programmatic soutions for adapting ActiveX, especially since its a Windows only technology.
An alternative might be the FireBreath project, which eases working with the NPAPI as well as giving you an abstraction layer over NPAPI and ActiveX - the idea being that you have to write most central parts only once.
Disclaimer: i am one of the owners of the project and thus probably biased ;)