From the WebShims documents here at http://afarkas.github.io/webshim/demos/demos/filereader.html it is giving me an example of using FileReader with WebShims. Following it I have this code now
<input class="ws-filereader" id="userFiles" multiple type="file"/>
//Added Mordenizr and JQuery and WebShims library
$.webshims.polyfill();
$(function()
{
$('#userFiles').on('change', function (evt)
{
var reader, file;
reader = new FileReader();
reader.onload = function (evt)
{
var fileData = evt.target.result;
};
file = $(this).prop('files')[0];
reader.readAsDataURL(file);
});
});
When I run this in IE9, It enters the code on change of userFiles but when I call to get
console.log($(this).prop('files').length);
It gives 0. What's wrong with it?
When I turn on
$.webshims.setOptions('debug', true);
console gives me
Unable to get value of the property 'input': object is null or undefined.
There is a similar issue posted on its quesions https://github.com/Jahdrien/FileReader/issues/46 and it says that WebShims support IE9 for FileReader
The problem is that the files API was not introduced in IE until IE10:
http://msdn.microsoft.com/en-us/library/ie/hh673542%28v=vs.85%29.aspx
This list of polyfills might be of use finding a workaround:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-file-api
Related
I'm just learning how to use the filereader now, and I duplicated an example I found online to experiment with, but for some reason, the filereader always returns an empty string.
First, I have an HTML form for the user to select a file, which then calls the script:
<input type="file" id="filelist" onchange="selectfile()">
Here's the script:
function selectfile() {
myFile = document.getElementById("filelist").files[0];
reader = new FileReader();
reader.readAsText(myFile);
myResult = reader.result;
alert(myFile.name);
alert(myResult);
alert(reader.error);
}
I have tried this with a number of different text files I typed up in Notepad, and in every case the results are the same. I'm only ever submitting one file through the html form.
The 3 alerts are for testing.
It displays the file name correctly.
It displays an empty string for the result.
It displays NULL for the error so it's not getting an error.
I searched around to see if there was something obvious here already, but couldn't find anything that seemed to point me in the right direction.
Thoughts?
The FileReader object is not ready yet. You need to add an onload event listener to the reader and then make a call to the readAsText method. You can then access the file contents from inside the callback function.
MDN docs - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result
function selectfile() {
myFile = document.getElementById("filelist").files[0];
reader = new FileReader();
reader.onload = () => {
myResult = reader.result;
alert(myFile.name);
alert(myResult);
alert(reader.error);
};
reader.readAsText(myFile); // only accessible when the FileReader is loaded
}
<input type="file" id="filelist" onchange="selectfile()">
I need to get the name, format and content of a browsed file only, multiple files not required. Even I cant use any HTML5 API/jQuery. Could you please guide me, using only pure JavaScript how do I solve this.
Here is the fiddle:
[https://jsfiddle.net/summtz8m/][1]
After getting all I need to click ImportASN1 button to POST data in REST service.
Here is my HTML
<button class="ebBtn" id="importButt" name="importButt"><span>Import ASN1</span></button><input type="file" id="myfile" name="myfile"><p id="contents"></p>
Here is my JS
var file = document.getElemtById("myfile").files[0];
console.log(file);
if (file) {
// create reader
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
// browser completed reading file - display it
console.log(e.target.result);
};
}
Your current code runs on page load. But at that time the file input is not filled out yet! Instead, listen to the click event on the button, or the change event on the file input.
In addition, there is a typo: document.getElemtById should be document.getElementById. Use the developer console in your browser (F12 → Console in many browsers) to find these errors.
The file name will then be present in the file.name property.
<script>
document.getElementById("myfile").addEventListener('change', function(ev) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
console.log(file.name, e.target.result);
};
});
</script>
I don't quite understand what is happening in the following code, if someone can guide me to the right direction maybe it will be easier for me to get the same variable as in the else statement but manually (in case FileReader api isn't supported).
Basicly in my if statement I want to make an ajax call and transform the picture to the base64 string and save it to the read variable same structure as in my else statement:
$('#file').on('change', function(){
if(typeof FileReader === "undefined") {
//AJAX CALL HERE
}
else {
var reader = new FileReader();
}
reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = $('.imageBox').cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
console.log(reader);
})
console log for the read variable in the else statement shows: Picture
You can't do that without some kind of Polyfiller, the reason being that Javascript (without the FileReader API) cannot handle files and cannot pass them about. You will not be able to send the file to the server with Javascript.
There are 2 ways you can do this :
Cause a postback to occur in which you get the file on the server
and then convert it to Base64 (can be done in PHP/ASP.NET (and
probably lots of others))
Or you can use a Polyfiller such as
moxie, this will load when the
page loads and if File API is not supported it will add a
Flash/Silverlight plugin to mimick the support.
I need to upload an image, something like this
<form>
<input type="file">
</form>
However, I want to crop/resize the file before uploading. The cropping and resize is no problem, but how do I get the base64 from the input file element? In IE10 and the other browsers I can it like this:
if (this.files.length === 0) {
return;
}
var file = this.files[0];
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (event) {
cropAndResize(event.target.result);
};
reader.readAsDataURL(file);
}
However, in IE9 this.files is undefined. How can I access the base64 of the uploaded image (without a round trip to the backend of course!) in IE9 ?
Here is a jsfiddle
IE9 does not support the FileReader API and therefore cannot do what you want using pure JavaScript. If you want IE9 support, then you'd need to use something like this Flash solution in order to achieve the same result.
I've been working on a page that aa user will be able to load some local files and basically stream them to the browser, I'm having problems with the below code in IE10, it runs through fine in IE10, firefox and chrome.
If I put it though an interval IE10 won't read it after the source file changes :(
however firefox and chrome can, anyone know of a workaround (besides don't use IE10)?
setInterval(updateLog, 5000);
function updateLog(){
for (j=0;j<LogList.length;j++){
var reader = new FileReader();
reader.onload = function(e){
document.getElementById("LogList").innerHTML += e.target.result;
}
reader.readAsText(LogList[j].file);
}}
Thankyou for any help
Try this code:
setInterval(updateLog, 5000);
function updateLog(){
for (j=0;j<LogList.length;j++){
var reader = new FileReader();
reader.onload = function(e){
document.getElementById("LogList").innerHTML += "<pre>"+e.target.result+"</pre>";
}
reader.readAsText(LogList[j].file);
}}
and follow the link:
http://msdn.microsoft.com/library/ie/ms533897.aspx