I am trying to read CSV file on Client Side, my code works fine with modern browsers with FileAPI however I need to figure out a way to support IE8 and IE9. Any help is appreciated.
Upload Control Used:
<input type="file" id ="uplaodFile"/>
JS: for Firefox :
var reader = new FileReader();
./.......
reader.readAsText(e.target.files.item(0));
For IE : ?????
"Can you please elaborate on Ajax method to upload a file to server and echo it back as that is what i am looking at so that i dont cause any Security issues." -user428747
Given a .csv file , e.g., from Wikipedia - Comma-separated values - Example
csv
Year,Make,Model,Description,Price
1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""","",4900.00
1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00
1996,Jeep,Grand Cherokee,"MUST SELL!
air, moon roof, loaded",4799.00
html
<pre></pre>
js
$(function () {
var url = "file.csv";
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select"
+ "* from csv where url='" + url + "?'"
+ "&format=json&diagnostics=true&callback=?")
.then(function (data, textStatus, jqxhr) {
var arr = [];
var len = data.query.count;
$.each(data.query.results.row, function (k, v) {
$.map(v, function (val) {
if (val === null) {
val = '""';
};
arr.push(val)
});
});
var rebuild_csv = function () {
$.when(
$("pre")
.append(
arr.splice(0, len).join(",") + "\r\n"))
.done(function () {
if (arr.length) {
rebuild_csv()
};
});
};
rebuild_csv();
}, function (jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
});
});
Without FileReader API support, you cannot read the file locally. You have to resort to Activex scripting as @Donal suggests, or use Flash/Java based solutions which come with their own set of problems.
Alternatively, you can switch to a server-side based solution. The server side solution consists of posting the file to a server side API which can then parse the file and send back the content. You can wrap this with AJAX/iFrame based approach to make it happen behind the scenes without the user noticing anything.
You can build it from scratch (DIY) or use a solution like filepicker.io which does that for you.
so you could call filepicker.read() and get the contents of the file directly. In newer browsers we wrap the HTML5 File API, but in IE8 we’re not so fortunate.
Instead, we have our server read the file and send it back in a readable format. We use the procedure above to send the file to our server. Iframe, new form, and all. Then have the server read the contents, convert to base64 if needed, and send it back down to the client.
DIY version:
// grab your file object from a file input
$('#fileInput').change(function () {
uploadFile(this.files[0]);
});
function uploadFile(file) {
$.ajax({
type: 'post',
url: '/csvProcessorUrl?file=' + file.fileName,
data: file,
processData: false,
contentType: 'text/csv'
})
.done(function(csvData) {
// process csv data
});
}
Note: csvProcessorUrl is just a dummy name I made up for the actual server side endpoint. Do replace it with proper one.
You can use a third party library like: http://blog.filepicker.io/post/33906205133/hacking-a-file-api-onto-ie8
If not with IE8, IE9 you will have to use: ActiveXObject("Scripting.FileSystemObject");
For example:
var fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.OpenTextFile("c:\\foobar.txt", 1);
while (!f.AtEndOfStream)
{
var line = f.ReadLine();
// do stuff
}
f.Close();
Please Note (taken from here):
ActiveX objects may present security issues. To use the ActiveXObject, you may need to adjust security settings in Internet Explorer for the relevant security zone. For example, for the Local intranet zone, you typically need to change a custom setting to "Initialize and script ActiveX controls not marked as safe for scripting."
IE 10+ has a FileReader.
