onFileSelect not called in IE8 #281

mlarcher · 2014-07-25T13:56:43Z

I eventually managed to have working uploads in IE9, but in IE8 onFileSelect is never called.
Here's some context data:

// console log with debug activated
// in IE9 (working)

Journal : version: 1.2.7 
Journal : protocol: http: 
Journal : doctype: [html] null null 
Journal : FlashAPI.Flash.init... 
Journal : (flash -> js).log: storeKey=5090616450_1.2.7 
Journal : (flash -> js).log: timeout=0 
Journal : [object Object] 
Journal : (flash -> js).log: storeKey=5090616450_1.2.7true 
Journal : (flash -> js).log: timeout=0 
Journal : Flash.event.mouseenter: [object Object] 
Journal : (js -> flash).multiple: true 
Journal : (js -> flash).accept: * 
Journal : (js -> flash).multiple: true 
Journal : (js -> flash).accept: * 
Journal : Flash.event.select: [object Object] 
Journal : {
    flashId : "fileapi14062964470965",
    type : "pdf",
    id : "1406296454570974",
    name : "200ko.pdf",
    size : 218882
}

// in IE8 (not working) [this IE8 is really IE9 in IE8 compat mode]

Journal : version: 1.2.7 
Journal : protocol: http: 
Journal : doctype: unknown 
Journal : FlashAPI.Flash.init... 
Journal : (flash -> js).log: storeKey=40806164402205072735307293030729604040_1.2.7 
Journal : (flash -> js).log: timeout=0 
Journal : [object Object] 
Journal : (flash -> js).log: storeKey=40806164402205072735307293030729604040_1.2.7true 
Journal : (flash -> js).log: timeout=0 
Journal : Flash.event.mouseenter: [object Object] 
Journal : (js -> flash).multiple: true 
Journal : (js -> flash).accept: * 
Journal : (js -> flash).multiple: true 
Journal : (js -> flash).accept: * 
Journal : Flash.event.select: [object Object]

AngularJS v1.2.20
angular-file-upload @Version 1.5.1

So the Flash.event.select is calle din both cases but in IE8 the onFileSelect is never triggered.

The text was updated successfully, but these errors were encountered:

mlarcher · 2014-07-25T14:20:58Z

I've updated angular-file-upload to 1.6.1
Now it doesn't work in either version, and IE9 won't even let me pick a file (nothing happens when clicking on the file input box)

After a bit of research, it seems that this is due to the location of the div containing the flash object: it was previously right after the input in the DOM, it is now the first-child of body. The positionning is all wrong and the dimensions too:

previously:

div js-fileapi-wrapper
    input
    div style="left: 0px; top: 0px; width: 400px; height: 122px; position: absolute; z-index: 1000000;"
        object

now:

body
    div style="top: 1px; width: 5px; height: 5px; right: 1px; position: absolute;"
        object

Also, when clicking on the flash object element after I located it, I can select a file but then I get:
// in IE9 :

Journal : version: 1.2.7 
Journal : protocol: http: 
Journal : doctype: [html] null null 
Journal : FlashAPI.Flash.init... 
Journal : (flash -> js).log: storeKey=5090616450_1.2.7 
Journal : (flash -> js).log: timeout=0 
Journal : [object Object] 
Journal : Flash.event.mouseenter: [object Object] 
Journal : Flash.event.select: [object Object] 
SCRIPT5007: Impossible d’obtenir la valeur de la propriété  « dispatchEvent » : objet null ou non défini 
FileAPI.min.js, Ligne 66 Caractère 199
Journal : (flash -> js).log: storeKey=5090616450_1.2.7true 
Journal : (flash -> js).log: timeout=0

// in IE8:

Journal : version: 1.2.7 
Journal : protocol: http: 
Journal : doctype: unknown 
Journal : FlashAPI.Flash.init... 
Journal : (flash -> js).log: storeKey=40806164402205072735307293030729604040_1.2.7 
Journal : (flash -> js).log: timeout=0 
Journal : [object Object] 
Journal : version: 1.2.7 
Journal : protocol: http: 
Journal : doctype: unknown 
Journal : FlashAPI.Flash.init... 
Journal : (flash -> js).log: storeKey=40806164402205072735307293030729604040_1.2.7 
Journal : (flash -> js).log: timeout=0 
Journal : [object Object] 
Journal : Flash.event.mouseenter: [object Object] 
Journal : Flash.event.mouseenter: [object Object] 
Journal : Flash.event.select: [object Object] 
SCRIPT5007: Impossible d’obtenir la valeur de la propriété  « fireEvent » : objet null ou non défini 
FileAPI.min.js, Ligne 66 Caractère 265

So both fail but on a different property.

danialfarid · 2014-07-25T14:56:12Z

Could you test the demo page and see if it works on IE8-9? Then you would have a better idea of why it is not working in your case.

danialfarid · 2014-07-25T14:57:10Z

Also you can try wrapping your input element in another div which is relatively positioned.

mlarcher · 2014-07-25T14:58:32Z

on the demo page, I get "Error: Impossible d'effectuer l'opération à cause de l'erreur suivante c00c023e. " in IE9 and "Error: Erreur non spécifiée." in IE8 when tryin gto select a file

mlarcher · 2014-07-25T15:05:00Z

Wrapping the input in a div with position:relative doesn't change what's happening

danialfarid · 2014-07-25T15:05:27Z

Make sure that you clear the browser cache and you have flash installed on your browser.
Try these demo links for different versions and see if that makes any difference:
http://1-1-0.angular-file-upload.appspot.com/
http://1-5-0.angular-file-upload.appspot.com/
http://1-5-1.angular-file-upload.appspot.com/
http://1.angular-file-upload.appspot.com/

danialfarid · 2014-07-25T15:05:41Z

What is your operating system?

mlarcher · 2014-07-25T15:10:05Z

All the previous demo versions you linked works fine on both version of IE. Only the current one on http://angular-file-upload.appspot.com/ doesn't.
OS is win7 pro

mlarcher · 2014-07-25T15:11:54Z

Flash player version is 12.0.0

danialfarid · 2014-07-25T15:12:35Z

version 1.6.0 and 1.6.1 use a different version of FileAPI. It might be a bug with FileAPI on win7. I have IE8 on Win XP and all demos are working fine.
So I guess for now you can work with version 1.5.1 until I figure out the problem if new FileAPI with win7

mlarcher · 2014-07-25T15:21:43Z

Thanks for the quick reply, I hope you'll figure out what's going wrong rapidly.
Please let me know if you need any additional data.

One point sounds odd though : I don't see the operating system version altering the positioning of the flash object in the DOM. :§

danialfarid · 2014-07-25T15:22:45Z

Can you post here the console log up to the point you get the error in IE8.

mlarcher · 2014-07-25T15:25:17Z

on which version ?
For my local app with 1.5.1 I already did in my first message of this thread. For the current demo, I get nothing in the console before the error message I pasted.

danialfarid · 2014-07-25T16:28:17Z

Can you verify if this works on your IE8?
http://rubaxa.github.io/jquery.fileapi/

mlarcher · 2014-07-25T17:12:41Z

yes, it does (both IE8 and 9)

danialfarid · 2014-07-25T18:28:22Z

Just to confirm http://1-5-1.angular-file-upload.appspot.com/ works both for IE8-9 right?

mlarcher · 2014-07-25T18:54:17Z

correct

danialfarid · 2014-07-27T15:32:27Z

Could you try to upload using "Click here to select file" button which is a normal <div> rather than a file input and let me know if that works with the latest version on win7 IE8-9?
If that doesn't work, could you also try to put the input file inside <div class="js-fileapi-wrapper"></div> and see if that changes anything?

Thanks

mlarcher · 2014-07-27T17:50:50Z

you mean for those test to be made with the latest dist folder on the master branch, right ?

danialfarid · 2014-07-27T19:09:56Z

Yea the demo page on win7 IE8-9. Version 1.6.x
I don't have win7, I just have win XP and it works there.

If you are testing it on your local code in version 1.6.2 you can also try this option

FileAPI = {
       wrapInsideDiv: true,
       ...
}

to see if that fixes anything. This option would make it look like the older version 1.5.x

mlarcher · 2014-07-28T08:57:48Z

The updated demo page with 1.6.2 works fine in IE8 and 9.
Looks like you got rid of the js error and the Object element is now positioning properly.

But on my project, I still get no call to onFilesUpload in IE8, even though everything works fine in IE9 and the Object is positioning corectly when I hover the input.
It seems the file select event never makes it back to js. That's odd considering it works on your demo. Any idea what could make a difference on that point ?

mlarcher · 2014-07-28T13:14:10Z

I've been digging around and managed to narrow down the non-working case:

When you have jQuery loaded (I use 1.11.1), the fileList declaration in the change handler returns undefined if you are using IE8.

fileList = evt.__files_ || evt.target.files; // both undefined

I was able to reproduce it on your demo page too.

I hope this can help you fix the issue.

danialfarid · 2014-07-28T19:55:46Z

It is fixed at version 1.6.3.
When you have jQuery the element.bind() would go through jQuery code which was not working together with the way the attachEvent is intercepted in this plugin and somehow would bypass that. So now I have a workaround for jQuery to make sure the shim and wrapper is being called to inject the files into the event from the FileAPI.

mlarcher · 2014-07-29T13:38:09Z

Thanks for the quick fix!
It seems there is still a slight issue, though : in 1.6.3 the upload works alright in IE8 and 9, but in IE8 the onFileSelect callback is called twice, resulting in two uploads of the same file.

mlarcher mentioned this issue Jul 25, 2014

IE8 does not use the headers supplied in upload config #111

Closed

danialfarid closed this as completed in 8cf9b7a Jul 28, 2014

mlarcher mentioned this issue Jul 29, 2014

File select callback is called twice in IE8 #284

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

onFileSelect not called in IE8 #281

onFileSelect not called in IE8 #281

mlarcher commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 27, 2014

mlarcher commented Jul 27, 2014

danialfarid commented Jul 27, 2014

mlarcher commented Jul 28, 2014

mlarcher commented Jul 28, 2014

danialfarid commented Jul 28, 2014

mlarcher commented Jul 29, 2014

onFileSelect not called in IE8 #281

onFileSelect not called in IE8 #281

Comments

mlarcher commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 25, 2014

mlarcher commented Jul 25, 2014

danialfarid commented Jul 27, 2014

mlarcher commented Jul 27, 2014

danialfarid commented Jul 27, 2014

mlarcher commented Jul 28, 2014

mlarcher commented Jul 28, 2014

danialfarid commented Jul 28, 2014

mlarcher commented Jul 29, 2014