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.
Related
I am reading a local CSV file using a web UI, and the HTML5 FileReader interface to handle the local file stream. This works great.
However, sometimes I want the file being read to be updated continuously, after the initial load. I am having problems, and I think it might have something to do with the FileReader API. Specifically, after the initial file load, I maintain a reference to the file. Then, when I detect that the size of the file has increased, I slice off the new part of the file, and get a new Blob object. However, there appears to be no data in these new Blobs.
I am using PapaParse to handle the CSV parsing, though I don't think that is the source of the problem (though it may be).
The source code is too voluminous to post here, but here is some pseudocode:
var reader = new FileReader();
reader.onload = loadChunk;
var file = null;
function readLocalFile(event) {
file = event.target.files[0];
// code that divides file up into chunks.
// for each chunk:
readChunk(chunk);
}
function readChunk(chunk) {
reader.readAsText(chunk);
}
function loadChunk(event) {
return event.target.result;
}
// this is run when file size has increased
function readUpdatedFile(oldLength, newLength) {
var newData = file.slice(oldLength, newLength);
readChunk(newData);
}
The output of loadChunk when the file is first loading is a string, but after the file has been updated it is a blank string. I am not sure if the problem is with my slice method, or if there is something going on with FileReader that I am not aware of.
The spec for File objects shouldn't allow this: http://www.w3.org/TR/FileAPI/#file -- it's supposed to be like a snapshot.
The fact that you can detect that the size has changed is probably a shortcoming of an implementation.
I'm using Phonegap to download an archive, unzip it, then read the files. It's all working until I try and read the files as text. If I use readAsDataURL() then I get a whole heap of stuff logged to the console.
function( file ) {
console.log(file);
var reader = new FileReader();
reader.onloadend = function( evt ) {
console.log( evt.target.result );
};
reader.readAsDataURL( file );
}
If I use readAsText() I get null. The files range from 300KB to 1.4MB, but all files return null in the console.
reader.readAsText( file );
Why would one function return something and the other be null? Is there a limit on the text size it can read?
This is the file object that I'm logging before creating reader, that I'm applying the functions to (I've shortened the file name):
{
"name":"categories.json",
"fullPath":"/var/mobile/.../Documents/data/file.json",
"type":null,
"lastModifiedDate":1380535318000,
"size":382456
}
And this is the evt object for readAsText():
{
"type":"loadend",
"bubbles":false,
"cancelBubble":false,
"cancelable":false,
"lengthComputable":false,
"loaded":0,
"total":0,
"target":{
"fileName":"/var/mobile/.../Documents/data/file.json",
"readyState":2,
"result":"null",
"error":null,
"onloadstart":null,
"onprogress":null,
"onload":null,
"onerror":null,
"onabort":null
}
}
UPDATE: I've seen in the W3C spec for the File API that result would only be set to null if an error had occured. But I tried adding a reader.onerror() function, but that wasn't getting called.
If an error occurs during reading the blob parameter, set readyState
to DONE and set result to null. Proceed to the error steps.
http://www.w3.org/TR/FileAPI/#dfn-readAsText
You may have been grabbing the fileEntry instead of a fileObject. Assuming file was actually fileEntry, try this:
var
fileEntry = file, //for example clarity - assumes file from OP's file param
reader = new FileReader()
;
fileEntry.file( doSomethingWithFileObject );//gets the fileObject passed to it
function doSomethingWithFileObject(fileObject){
reader.onloadend = function(e){
doSomething(e.target.result); //assumes doSomething defined elsewhere
}
var fileAsText = reader.readAsText(fileObject);
}
Definitely an API that screams for cruft reduction.
Using the filereader API it is possible to show a preview of the file, by reading the file with readAsDataURL
What I am trying to do is:
The user selects a file
A preview is shown, so that the user has some feedback.
If the user is satisfied, he submits the data to the backend.
Implementing step 3 can be done by re-reading the file with readAsBinaryString, but this looks problematic because the data could have disappeared or changed on disk. So What I would like is to convert the data returned from readAsDataURL to the format returned by readAsBinaryString. How can I do this?
Another alternative would be to submit the data to the backend as returned by readAsDataURL, but I would like to avoid that, since that would require special handling on the backend in my case.
Like CBroe said, you dont need to read the file twice.
JS :
handleFileSelectThumbFile(evt){
var files = evt.target.files;
var file = files[0];
// You can get the mime type like this.
var thumbMIME = files[0]['name'].split('.').pop();
if (files && file) {
var reader = new FileReader();
reader.onload = function(readerEvt) {
// Split the readerEvt.target.result by a ','.
// You can send the binaryString variable to the server.
// Its base64 encoded already.
var binaryString = readerEvt.target.result.split(',')[1];
// Set the image preview to the uploaded image.
$('.img-preview').prop('src', readerEvt.target.result);
}.bind(this);
reader.readAsDataURL(file);
}
}
HTML :
<input type="file" onChange={this.handleFileSelectThumbFile} required/>
<img src='http://placehold.it/300' class='img-preview'/>
You can read the MIME type from the first part of readerEvt as well. Look at CBroe's comment above.
I am planning to create a application on my local . I need a javascript code that to render the content from whichever file I am selecting from my system using html file-upload input box. Referred to the below link but
http://www.alecjacobson.com/weblog/?p=1645 where the code is not compatible for other browsers,
Thanks in Advance
For security reasons you can't open a file from the browser. What you can actually do is upload it to the server and then write it back to the page.
To upload the file I suggest you uploadify or jquery upload.
You are welcome.
If you don't care about the cross-browsing support then:
<input id="file" type="file" multiple="" onchange="startRead()">
<pre><code id="output"></code></pre>
function startRead() {
//obtain input element through DOM
var file = document.getElementById('file').files[0];
if (file) {
getAsText(file);
}
}
function getAsText(readFile) {
var reader;
try {
reader = new FileReader();
} catch (e) {
document.getElementById('output').innerHTML = "Error: seems File API is not supported on your browser";
return;
}
// Read file into memory as UTF-8
reader.readAsText(readFile, "UTF-8");
// handle success and errors
reader.onload = loaded;
reader.onerror = errorHandler;
}
function loaded(evt) {
// Obtain the read file data
var fileString = evt.target.result;
document.getElementById('output').innerHTML = fileString;
}
function errorHandler(evt) {
if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
// The file could not be read
document.getElementById('output').innerHTML = "Error reading file..."
}
}
We are developing kinds of web-based GUI editor. This issue have been the problem for long time.
As I know, the method in the site you mentioned is the only way. We are using HTML5 File System.
Before this, We've considered using kinds of Flash module, local web server, dropbox, ...
I am trying to create a new FileReader object from an XmlHTTPRequest object (level 2) which I've downloaded with "GET".
I am trying to create the FileReader object inside the onload of the xhr. The downloading of the file (a .gz file) goes fine and the contents is getting returned in the xhr response. However, I am unable to create a FileReader object from this. The error I am experiencing that I neither get the onloadend event nor any event in the FileReader after trying doing a readAsText(response.currentTarget.responseText) or any of the other methods of reading the contents.
What am I missing?
Code for th XHR load event:
function onLoad(e) {
var reader = new FileReader();
reader.onload = function(evt) {
console.log('a');
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
console.log('s');
}
};
reader.readAsText(e.currentTarget.responseText);
I think that what you're missing is that that's simply not what FileReader objects do. They have nothing whatsoever to do with handling responses to HTTP requests. Instead, they're for reading local (to the client machine) files.