avapps/filereader

A FileReader polyfill for Internet Explore and Safari using Flash

filereader's Issues

Not working in IE9 if debug mode = true and debugger turned off

Hello!

I just found an interesting bug which occurs in Internet Explorer 9:
If the FileReader´s debug mode is switched on, but the IE F12 developer tools (debugger) are not open, the FileReader does not work.
The reason for this is that the console object does not work if the developer tools are not open and thus console.info(...), console.log(...) etc. throw exceptions.

Mime-type of files with 4 character extensions comes back as text/plain

The SWF action script uses substr(-3) to get a file extension in order to pull the mime-type from an array. Because of this, any extension that's not 3 characters gets a mime-type of text/plain. This causes problems with images that have a .jpeg extension because the base-64 encoding comes back wrong.

Doesn't work in IE6/Compatability mode (fix included)

IE9 compatability mode throws an error because of an illegal extra comma in the end of FileReaderEvent.prototype-object (Line 300). Same goes for the original "options" object (Line 20). Also a missing semicolon on line 240 "this._id = file.input + '.' + file.name".

I ran JSHint on it and it shows these three errors only, when fixing them it started working fine.

My first acitivity on Github, sorry if I've missed any rutine. Thanks for the great polyfill!

Question: Any upload examples?

Hi,

Have been looking at using this polyfill solution for ie9 and below, but lack the knowledge to plug this into something that will upload the files once they are chosen. I can get the filelist fine, the documentation was no problem there, but I have been searching for a while now for a working method to then upload the files in the list to the server. I have a working upload api, but just don't know how to plug the client side in.

Any further documentation would in the readme would be greatly beneficial.

Thanks,
J

Object is positioned wrong

I have no idea what happened… I had this working a few weeks ago, went to check something else in IE today and found that it's no longer working at all. I think it's possibly related to the fact that the Flash Object isn't getting positioned, but I'm not positive.

SWF remains after element has been removed from DOM

Hi, I am using file reader in an angular context. In this particular example I am editing a resource with filereader. It draws the swf on the page. Then when the user navigates to a different page (this is a single page ajax app) the swf continues to lurk and is clickable by the user. The filereader plugin should be responsible for removing it when the element is destroyed.

Seems to Clobber Some jQuery Functions

Thanks for the really helpful plugin.

I'm sorry I don't have more background information, but when I try to use some jQuery functions in the onloadend callback they don't work. There are no error message, they just don't do anything.

The code works fine in Chrome and FF (with native FileReader), so I'm pretty positive that this is related to your polyfill. (I'm using Safari here)

 //Inside a widget _create....

  var self = this;
  $(self.element).fileReader({filereader:'/assets/filereader.swf', debugMode:true});

  $(self.element).change(function(e){
      var reader = new FileReader();
      reader.onloadend = function(e){
        console.log('-----hi-----');  // <--- called just fine
        console.log($(self.options.imageContainer).css()); // <-- doesn't do anything even tough element has inline style
        console.log($(self.options.imageContainer).html()); // <-- works fine
        self.options.imageContainer.css({'background-image':'url('+e.target.result+')'});  //<-- does nothing
      }   
      var file = e.target.files[0];
      reader.readAsDataURL(file);
  }); 

Uncaught Error: Error calling method on NPObject.

Erroring on line 208: FileAPIProxy.swfObject.read(file.input, file.name, 'readAsDataURL');

I know hardly anything about flash, so it may just be something i'm over looking.

--Please help!!

Bug with multiple use of fileReader() ?

Hi everyone,

I'm using Jahdrien's FileReader (many thanks!) but I think I have a problem with calling fileReader() multiple times in my JS file.

I'm using it in a Rails app, i'm using CoffeeScript for the JS part. I'm trying to preview images with IE9.

I have multiple input and I'm calling multiple times the function fileReader() but when I do so it seems to break stuff... Do someone had the same issue?

previewImage = (event) ->
 * do stuff *

$input = $("#my_input")
$input.fileReader()
$input.change (event) ->
   previewImage(event)

It works fine.

But then I add :

anotherPreviewImage = (event) ->
 * do stuff *

$anotherInput = $("#my_input2")
$anotherInput.fileReader()
$anotherInput.change (event) ->
   anotherPreviewImage(event)

And the whole thing doesn't work anymore on IE9...

Thanks for helping me!

Uncaught ReferenceError: swfobject is not defined

I'm getting this error on line 100 of jquery.FileReader.js.

Maybe I missed this in the documentation, but I'm not sure if I'm including all the necessary files. I'm currently have jquery.FileReader.js and filereader.swf

Android support

I was hoping to implement this plugin to work alongside https://github.com/blueimp/jQuery-File-Upload, since it uses the FileReader api in certain places. However, inside the swfobject.embedSWF block, "e.success" is true, but "e.ref.add" is undefined. A huge percentage of Android users are still stuck on Android 2.3 and neither the default browser nor FireFox have FileReader support on Android 2.3. Any chance of support for this?

Can't get file contents

I am having an issue with trying to get the FileReader working properly. I have some code that is kinda working, and by that I mean when I log the file in FireFox it works somewhat. It shows me the file information but not the data in the file.

Also debugMode set to true doesn't do anything for me. It doesn't show me any debug information. Below is some test code I'm using. Please let me know if my example is wrong. In IE9 it just gives me errors that the target.files isn't populated at all. From some of the research I've done in the issues section here it refers to something called: FileAPIProxy? But when I try to follow that It is undefined.

$("#fileToUpload").fileReader({
filereader: '/js/filereader/filereader.swf',
debugMode: true
});

$("#fileToUpload").on("change", function (e) {
console.log( e.target.files );
var file = e.target.files[0];
var fileReader = new FileReader();

console.log( file );
var d = fileReader.readAsDataURL( file );
console.info( d );

});

Wrong behavior after the first file read

Hi,

When I read from the input file the first time, everything is correct, but when the file is changed and I read again, the load event will be triggered 2 times, when I change the file again, it's getting triggered 3 times, and so on... This is obviously wrong, the real Filereader object doesn't behaves like this.

Here are some logs :

debugMode : ,true 
File Input add...,my_input_id,false,,, 
MouseOverEvent...,my_input_id 
FileInput Event click[object Object] 
Browsing...,my_input_id 
File Input change...,my_input_id 
FileInput Event change[object Object] 
FileReader read...,my_input_id,A.JPG,readAsDataURL 
FileReader Event loadstart[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event load[object Object]true 
FileReader result...,my_input_id.A.JPG 
FileReader Event loadend[object Object]true 
FileInput Event click[object Object] 
Browsing...,my_input_id 
File Input change...,my_input_id 
FileInput Event change[object Object] 
FileReader read...,my_input_id,B.jpg,readAsDataURL 
FileReader Event loadstart[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event progress[object Object]true 
FileReader Event load[object Object]true <====== WRONG FROM HERE
FileReader result...,my_input_id.A.JPG 
FileReader Event loadend[object Object]true <=== TO HERE
FileReader Event load[object Object]true 
FileReader result...,my_input_id.B.jpg 
FileReader Event loadend[object Object]true 

@Jahdrien if you don't have time to fix this please give me some pointers and I'd be happy to submit a PR, thanks

Uncaught TypeError: Object #<HTMLObjectElement> has no method 'add'

It seems to be possible that FileAPIProxy.ready can be set to true when FileAPIProxy.swfObject's ExternalInterface methods are not yet available. This causes the following exception:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'add'

The issue occurs in Chrome 22 and IE9, and seems to be wholly dependent on the timing of when FileReader is initialized.

Testing for the type of FileAPIProxy.swfObject.add seems to be a safe way to determine whether or not FileAPIProxy.swfObject is ready; I'll submit a pull request containing that patch for your consideration.

Trigger click

Hi,

Not really an Issue, but is it possible to Trigger a click. I would like a custom button who triggers the click inside your filereader swf. $('#element').trigger('click'); In firefox it is possible to trigger a click to a invisible fileinput. In IE a want the same behaviour with your script.

Thanks for your answer.

Marc-Jan

Accept attribute doesn't accept multiple values or wildcards

First of all, you can't supply a custom accept value option to fileReader() because like 48 is wrong (https://github.com/Jahdrien/FileReader/blob/master/jquery.FileReader.js#L48). Obviously the final value should be options.accept and not options.multiple.

In my HTML I have an attribute like accept="image/*,application/zip" which means any image or zip files. However this polyfill only seems to be able to handle simple values like accept="image/jpeg" and it doesn't support multiple mimetypes or wildcard mimetypes.

A fix for multiple mimetypes should be easy but maybe there's no easy way to do wildcards in actionscript? I thought that maybe instead I could just supply file extensions like fileReader({accept: '*.jpg, *.jpeg, *.png, *.gif, *.zip') and they'd make it to FileFilter in actionscript but that's not the case.

Copyright statement

I like to add your project files to my project, but your js files have no copyright statement included, could you please include it? thanks for your work.

IE 9 - Ready callbacks don't get fired

I will dig deeper in the code but when I tried to enabled this polyfill in IE, the mouse over event is not moving the flash button.

It seems like the if statement on line 108 is always false.

And the FileAPIProxy.onSWFReady method is never call neither.

Anybody ran into this problem ?

Newlines are inserted every 76 characters

When you read files in browsers with native support for FileReader then the result is one long string. However when using this polyfill newlines are inserted every 76 characters. This doesn't seem to make any difference when reading images but zip files read this way will not work with zip.js.

While base64 is meant to have a newline every 64 or 76 characters, what we're actually dealing with here are data URIs which are meant to be a single line.

To work around this issue I'm currently just replacing all whitespace in the result with .replace(/\s/gm, '').

input.on('change', ...); doesn't work, jQuery 1.8.3

Plugin initializes well, everything works fine etc. However, when I want to use function from Wiki that gives me list of files (in console) I've picked it's simply doesn't work. However it doesn't work only when this function looks like this:

$('#fileupload').on('change', function(evt) {
    for (var i = 0; i < evt.target.files.length; i++) {
        console.log(evt.target.files[i].name, evt.target.files[i].type, evt.target.files[i].size, evt.target.files[i].lastModifiedDate);
    }
});

But when I change .on() to .live() it works fine... Any ideas how to make .on() works as it supposed to?

IE9 Flash callback issues

I am having problems in IE9 with the Flash FileReader callbacks that I can not resolve. After trying to figure this out over a weekend I found what I think may be the problem. I am using the FileAPI polyfill to get the files list in IE9 (which I imagine should not be an issue). This code should work I believe unless I really am doing something wrong here.

Filereader options

filereader:
    id: 'fileAPIProxy'
    filereader: '/assets/libs/webshims/vendor/filereader/filereader.swf'
    expressInstall: '/assets/libs/webshims/vendor/swfobject/expressinstall.swf'

Binding handler code (with feature detection removed)

   isImage = (file) ->
       file and typeof file.type isnt "undefined" and file.type.match('image.*') and file.name.match(/\.(gif|png|jpe?g)$/i)

   $(element).fileReader(viewModel.filereader).on(
      change: (event) ->
        file = FileAPI.getFiles(event)[0]
        if isImage(file)
          reader = new FileReader()
          reader.onload = (event) -> koPhoto.photo_uri(event.target.result)
          reader.readAsDataURL(file)
    )

The Flash callback that is issuing the JS error when readAsDataURL() is executed is below. This link references the Flash Callback problems in IE; http://zaalabs.com/2011/01/adobe-flash-externalinterface-issues-with-internet-explorer/

function __flash__addCallback(instance, name) {
  instance[name] = function () { 
    return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
  }
}

Error: Error calling method on NPObject.

I use readAsDataURL to add preview image before crop/upload. I encoutoured "Error: Error calling method on NPObject." with Chrome 24.0 and the same error with FF 18.0.1 said "Error in Actionscript. Use a try/catch block to find error."

This is my code :

YmpCropper.prototype.processPreview = function(files) {
var file, reader;
try {
file = files[0];
this.validateFile(file);
reader = new FileReader();
reader.preview_div = this.preview_div;
reader.img_tag = this.img_tag;
reader.cover_height = this.cover_height;
reader.onload = this.updateCover;
return reader.readAsDataURL(file);
} catch (error) {
return this.displayError(error);
}
};

$('#fileReader').fileReader({
id: 'fileReader',
filereader: 'cropper/filereader.swf',
expressInstall: 'cropper/expressInstall.swf'
});

is minified version updated?

there is a ~3 months difference between jquery.FileReader.js and jquery.FileReader.min.js commits.
maybe some kind of release or at least adding a tag to mark a commit as "stable" would be useful.

Would you be interested contract work?

Hi Jahdrien,

Sorry for the non-issue.

We are building a photo uploader/editor. Would you be interested in flash/js contract work? We're a public company in San Jose, CA.

Thanks,
foobart
[email protected]

No callbacks triggered

Hi there,

I just discovered your project some hours ago - great work by the way, that's exactly what I need.

According to the debug mode everything works fine except that none of the callbacks are triggered when trying to read the file.
Here's a little snippet

    $('input[type="file"]').on('change', function(evt) {

        var file = evt.target.files[0];

        var fileReader = new FileReader();

        fileReader.onabort = function( e ) { console.log('abort') };
        fileReader.onerror = function( e ) { console.log('error') };
        fileReader.onload = function( e ) { console.log('load') };
        fileReader.onloadend = function( e ) { console.log('loadend') };
        fileReader.onloadstart = function( e ) { console.log('loadstart') };
        fileReader.onprogress = function( e ) { console.log('progress') };

        console.log("read file");
        fileReader.readAsDataURL( file )
    });

Console shows me your debug printings an my "read file" but nothing more.
Any ideas how to fix this?

["debugMode : ", true]
["File Input add...", "flashFileInput0", false, null, null, null]
["SWF FileAPI ready!"]
["MouseOverEvent...", "flashFileInput0"]
FileInput Event click
Object
["Browsing...", "flashFileInput0"]
["File Input change...", "flashFileInput0"]
FileInput Event change
Object
read file
["FileReader read...", "flashFileInput0", "award.png", "readAsDataURL"]

returning Object instead of a File?

My code expects a File object but instead its returning an Object? see this screenshot - http://d.pr/i/6ml3

Any idea why?

Is there any way to get a current list of files that are in queue? (in File object hopefully)

Ajax error in IE

I have a servlet in java.

My servlet URL is http: //192.168.10.113:8080/collective-intellegence/UserClickPersonClassifier?userid=1&query=asp.net

This URL is giving json data.

I am using a jquery ajax call to get the data.

My Code

function SecondResultLink(link, userId, userInput) {
try{
var urlSearch = "http://192.168.10.113:8080/collective-intellegence/UserClickLinkClassifier?userid=" + userId + "&query=" + userInput;
$.ajax({
url: urlSearch,
type: 'POST',
dataType: 'json',
async: false,
success: function (data) {
if (data.length != 0) {
for (index = 0; index < data.length; index++) {
if (!link.exist(data[index].Link.name.toLowerCase(), data[index].Score)) {
link.add(data[index].Link.name.toLowerCase(), data[index].Score);
}
}
}
},
error: function (error) {
alert(error.error);
}
});
}
catch (err) {
alert(err);
}
}

the above code is giving 45 records in Chrome,Firefox and Safari but giving 25 records in Opera and giving error message in IE.

Error Message in IE:- function(){if(c){var a=c.length;m(arguments),i? k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))} return this}

In all browser except IE request is going to server, but in IE not request is going to the server.

This is not a cross domain problem because i allowed all to access the server(seen in the header that Access-Control-Allow-Origin: *)

What is problem with IE? how to solve this issue or any other approach to get the data.

Please help

Thanks in advance

Where's the usage documentation?

How do you use this plugin? Where is the manual?

IE9 very long loading explorer Bootstrap modal

I have a problem if I use this plugin in it hangs for a minute and than shows explorer window but if I use this plugin not in modal window it works great ?

readAsBinaryString() doesn't work

readAsBinaryString() returns this for an example jpeg file:

"�X�`"

Manually Browsing

I'm trying to manually trigger the browse window to open using FileAPIProxy.swfObject.browse('if-of-my=input') and I can see the code getting called in Flash with debugMode on by the browse window never open.

Delete minified file as it is obsolete

SWF Object Not Always Clickable in IE

This plugin is exactly what I need, but I'm having a bit of an issue in IE (9 and 8, I haven't tested others yet).

The SWF Object is loading every time the page loads, but sometimes it's not clickable. It seems completely random.

IE9 very long loading explorer

When I have on my html page some object with position:fixed (for example Bootstrap modal)
it loads explorer too long
without this modal it works great ?

swfObject method is undefined

Hi, i setup the plugin according to docs but on windows safari its not able to read file as readAsDataURL() it throws this..

TypeError: 'undefined' is not a function (evaluating 'FileAPIProxy.swfObject.read(file.input, file.name, 'readAsDataURL')')

it is able to read the file though any reason, i scrolled it too as am aware of safari scroll issue but it persists??

Syntax error when using readAsText

First of all: thanks for an awesome polyfill, it saved my day :-)

When I attempt to call readAsText, both Chrome and Firefox return errors that I can't pinpoint. I've pasted the errors below.
Safari doesn't give an error, but target.result is just undefined.
When I use readAsDataUrl, it works fine.

Chrome error:
Uncaught SyntaxError: Unexpected token ILLEGAL (filereader.jquery.js:256)
window.FileReader._handleFlashEvent (filereader.jquery.js:256)
window.FileAPIProxy.onFileReaderEvent (filereader.jquery.js:139)
(anonymous function)

Firefox error:
unterminated string literal
var __flash_temp = "application/pdf\r\ninvoice.pdf\r\nYES\r\n%PDF-1.4\n%ª«¬\n4 ...
(with an arrow pointing to the " before application/...)

(part of) the code:

            var sendData = function(event) {
                console.log(event)
                var filedata = event.target.result
                console.log(filedata)
            }

            var reader = new FileReader();
            reader.onload = sendData;
            reader.onerror = function(stuff) {
                console.log("error", stuff)
                console.log (stuff.getMessage())
            }
            reader.readAsText(file, 'UTF-8')
            //reader.readAsDataURL(file)

n/a

Many thanks.

The two lines required for Safari support are commented out

Lines 86-87 (https://github.com/Jahdrien/FileReader/blob/master/jquery.FileReader.js#L86-87) are required with Safari (on Windows at least) but for some reason they are currently commented out. Uncommenting them doesn't seem to break any other browser.

Without those two lines Safari doesn't seem to consider the SWF as displayed and so the onSWFReady event won't fire.

Bower support

It would be nice to be able to install this via bower. Only the swf, minified and unminified dist files are necessary and you can include dependencies for jquery and swfobject.

IE 8 Issue

On IE 8 e.target.files is undefined, I think is because the .files attribute does not exists.
What should I use instead to get the file(size,name,bynarydata?)?

Thank you.

Will IE9 support this ?

The change event is often fired very late in IE9 (event throttling?)

I turned on debug mode and added new Date().getTime() to the start of all the console.info in the javascript and IE9 is spitting out the following:

debugMode : ,true 
SWF FileAPI ready! 
File Input add...,image-input,true,image/*,application/zip,, 
MouseOverEvent...,image-input 
1344039113616 FileInput Event click[object Object] 
Browsing...,image-input 
File Input change...,image-input 
1344039161137 FileInput Event change[object Object] 
FileReader read...,image-input,eggs.jpg,readAsDataURL 
1344039161138 FileReader Event loadstart[object Object]true 
1344039161147 FileReader Event progress[object Object]true 
1344039161157 FileReader Event progress[object Object]true 
1344039161203 FileReader Event load[object Object]true 
FileReader result...,image-input.eggs.jpg 
1344039161256 FileReader Event loadend[object Object]true 

That's 47521ms or 48 seconds between clicking on the swf and the change event being fired. I didn't spend more than a second or two actually selecting the file.

Sometimes it just works fine for 2 or 3 files, and then it gets slow again. Then it starts working quickly again for 2-3 files, etc. It never happens in any other browser, not even Safari.

When IE9 is in this state the browser is actually working fine and fully responsive. Further clicks to the swf will still log FileInput Event and Browsing... (but no file input window is opened) so I assume flash isn't locked up either.

Both IE9 and Safari are using Flash 11.3.300.270.

I think this is actually caused by selecting the files too fast. Does IE9 throttle events from Flash? If I select files really slowly (3+ seconds between each click) then everything seems to work fine.

Safari support

Hi guys,

Great work on this polyfill, I really appreciate the open-source development. So, I have a quick question.

On what versions of Safari will this polyfill enable the use of FileReader? 5.0 up to to 6.0? I realize that FileReader is supported in Safari from version 6.0 and onwards.

And what about IE. Does this polyfill support IE8 and IE9?

Thanks for your help!

Regards,

Aksel

Hidden button not repositioned on browser resize

It seems that if the user resizes the browser which moves the underlying button, the floating import button that is hidden doesn't move to match its position.

Doesn't have support for File.slice

File.slice would be a really handy addition so whole files don't have to be uploaded – instead you can focus on smaller slices at a time.

See this for an example of File.slice:
http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-slicing-files

I am an experienced coder, but don't have much actionscript knowledge. Would this be possible?

Sample HTML

FileReader looks great, but I can't get it working. I only go as far as:
["debugMode : ", true]
["SWF FileAPI ready!"]

My on("change") function never gets called. I'm missing something. Maybe I've added $("element").fileReader( options ) to the wrong DOM element? Don't know.

I think it would help me and other users to get it straight away if you provide a sample HTML file with the code. Thanks a lot!