-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
file reader plugin events are not firing #505
Comments
Currently the only possible workaround is: const WrappedFileReader = window.FileReader
window.FileReader = function OriginalFileReader(...args) {
WrappedFileReader.apply(this, args)
const originalInstance = this[Zone.__symbol__('originalInstance')] // eslint-disable-line
return originalInstance || this
} |
I have had this issue, too. After updating from 1.3.17 to 1.3.21 everything worked again. |
@comfortme Can you try with the latest version v2.2.2 and report back if you still have any issue? Thanks. |
@ihadeed I am still seeing this issue for ios only. I am using zone.js v0.6.25 at the moment, with ionic-angular v2.0.0-rc.1 and ionic-native v2.2.3 I tried the workaround and the events are now firing on ios, but then I recieve and have to workaround this error on android.
This is still an open issue for ionic-native. |
I also have this issue with ionic-native 2.2.10 and strange is that it doesn't happen always and it's very hard to tell how and why exactly does it happen. When I modify other parts of my code and build the app, File.readAsArrayBuffer sometimes just stops working and its promise never resolves or rejects. |
@pdrosos Please create a new issue with steps to reproduce this. Also, make sure you're waiting for |
Sorry I just had another look at the original issue here. You are having problems because you are passing Here is an example: (or here) Camera.getPicture()
.then(imageData => {
const fileName = imageData.split('/').pop();
const path = imageData.replace(fileName, '');
return File.readAsArrayBuffer(path, fileName);
})
.then(response => {
console.log('File response is: ', response);
})
.catch(console.error.bind(console)); |
@dbpieter can you share the code so I can have a look? |
@ihadeed the last solution you suggested worked on ios, but the promise still doesn't resolve on android. here is a code sample :
|
I currently have this problem with:
I can't get any of the workarounds to work. @dbpieter what do you mean by "Loading zone.js before cordova.js also fixes it." and if that is a fix, could you give some more details? My app is currently completely dead in the water because of this :( |
@joewoodhouse
The workaround suggested by @stalniy also works for us. However this seems like a slightly cleaner fix. |
Hmm I'm using a pretty standard ionic2 app setup, and I have no zone.js script - is it not bundled up into the main.js? |
@joewoodhouse It's probably bundled into your main.js yes (which is the problem). We created a separate bundle with zone and core that gets loaded before cordova.js. (we use webpack as our build system). Our main.js (excluding core and zone) gets loaded after cordova.js |
@dbpieter I'm not sure but this is my vision of how it works when you put zonejs before cordovajs:
In this case it works as you want but there may be issues with other plugins and zonejs |
@stalniy does the cordova-file-plugin overwrite the HTML5 FileReader or is it patched? I thought it would work as following: On Load
On Execute
|
I had a bit more success with this by wrapping everything in a this.platform.ready().then(()=>{}). It now seems to reliably call the onloadend callback. However I'm not really sure why I need to do this. My use of FileReader is not anywhere near to app startup time so there should be no issue with the platform being ready or not. Perhaps |
@joewoodhouse I did this to and kept on having the problem, but I remember it looked solved on the first trials because I hadn't rebuilt my android app properly. |
@BjornRombaut as you can see from source https://github.com/apache/cordova-plugin-file/blob/master/www/FileReader.js it actually overwrites (or maybe better say wraps |
Here is the working example for reading image in base64 format,
|
Is there anyone who has reorder the polyfill.js before cordova.js still doesn't get the solution? If yes can you please respond what steps did you do to solve the problem Also if by reordering if you are able to resolve can you please paste here your version of package.json |
It’s a <script src="build/polyfills.js"></script>
<script src="cordova.js"></script>
<script src="build/vendor.js"></script>
<script src="build/main.js"></script> Cordova must included AFTER Polyfills But is there an official solution?
Update: The placement of cordova after polyfills will produce new problem in prod build. Maybe load cordova twice (head and body after polyfills)? 😄 |
How can this problem be 100% reproduced? Does anyone have an idea? It's hard to test it with this sporadic behavior. I'm currently testing the solution of @stalniy I placed it in index.html on bottom after all other scripts. Thanks for this solution. But I'm not yet sure if this works. Because this poor reproducibility of this bug. |
@stalniy Your solution with WrappedFileReader does not work for me. I get the error |
Still getting this error and none of the solutions work. |
I was able to fix my issue by getting the original native browser instance and using it.
This worked fine in Android and iOS. ---------------EDIT----------------- Here's a more detailed example:
|
I got this error when trying to use your solution: "Property '_realReader' does not exist on type 'FileReader'". Any advice? |
That looks like a Typescript error, not a JavaScript error. If so, you just need to cast the
|
This also worked for me, but make sure you attach your |
Hi, I'm having this exact issue (only on crosswalk, not default webview) and though I have been able to follow your instruction and successfully called the readAsArrayBuffer function, there is another the problem at the very last stage which is the input for it. "Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'" Below is my piece of code and I'm pretty sure that the variable I passed as the parameter is indeed a File object and as you can see, I tried to cast it to File again right before passing it but there's no use.
When I console.log the file, these are the properties that I got
|
@hnguyen48206, since I've posted my original fix, I've had to alter the code a little bit. Here's the latest:
The main thing is you have to check if the file is a Blob or not. If the file is a Blob, then use the real FileReader. Otherwise, don't. |
Thanks for your quick response, by checking the type of Blob, now I can assure that the 'file' returned from the FileEntry.file() is not an actual Blob/File indeed. However, I dont really know exactly what was returned cause there is no way to check what the 'file' is. If I console.log the FileEntry, it does have all the properties that listed here: https://cordova.apache.org/docs/en/1.9.0/cordova/file/fileentry/fileentry.html and should be legit. Then now the question is what is the thing that FileEntry.file() return? Any help would be much appriciated. Below is the code I use to turn File URI to File entry before converting it to File/Blob
|
@hnguyen48206, that file object is defined here: https://github.com/apache/cordova-plugin-file/blob/master/www/File.js. In that same directory you can see the definitions for FileEntry and other applicable classes. |
Im having trouble reading this file returned by "fileEntry.file(file =>...)" using the _realReader. It throws an error saying the "file" its not an actual Blob. How can I convert this "cordova file" into a native js Blob? |
Thank you so much. This solution worked for me with Ionic 5! |
… the cordova-plugin-file plugin. See danielsogl/awesome-cordova-plugins#505.
was having problems when building for android, for ios devices, it worked normally. both solutions, changing the order of cordova.js or instantiating the browser file reader worked. Brazil thanks you! 🎉 |
Your code save my life |
Hi this solution is for writing pure html without any framework. I am using Angular, no where to touch the sequence of polyfill.js. In index.html it's not even there. Is there any solutions for angular? |
@dansterrett i am using this but not work in ios... getBlobFromFile(file: File): Promise {
|
Also having a problem with this. After doing all above, the file.onloadend or even onerror is not firing. I see that in the android logs, it's attempting to read the file. But no events are firing.
|
Could this be solved by adding (window as any).__Zone_disable_FileReader = true; to the |
You saved my life hahahaha thanks <3 |
From @comfortme on August 27, 2016 16:43
Short description of the problem:
while using file plugin with ionic-native found out that
readAsArrayBuffer(path, file)
promise never resolves!i did some digging and turns out it's an fixed angular 2 zone issue and here is a detailed closed ionic issue about it. ionic-team/ionic-framework#6020
it looks like it's never been fixed for ionic 2
What behavior are you expecting?
file promises to be resolved
Steps to reproduce:
Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
angular/zone.js#137
angular/angular#2533
Which Ionic Version? 1.x or 2.x
Cordova CLI: 6.0.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
OS: Windows 8.1
Node Version: v4.4.3
Copied from original issue: ionic-team/ionic-framework#7891
The text was updated successfully, but these errors were encountered: