Upload widget and Angular 9 incompatible
Hi there,
I've been using the cloudinary upload widget in angular 8 without any problems, now I've updated to angular 9 and the cloudinary upload widget can't be used with inline-container any more. It works indeed without inline-container as a modal (which is not useful because of the missing close button on mobile, which is already known as a cloudinary bug as well).
In my index.html:
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
In my app.component.ts:
ngAfterViewInit(){
cloudinary.openUploadWidget({
cloudName: cloudName,
apiKey : apiKey,
inlineContainer:document.getElementById('my-widget-container'),
}, (err, result)=>{
console.log(err)
console.log(result)
})
}
In my app.component.html
<div id="my-widget-container"></div>
Steps to reproduce. Create a fresh angular 9 application with the angular CLI and
The Resulting Errors:
ERROR Error: Uncaught (in promise): TypeError: Converting circular structure to JSON
--> starting at object with constructor 'TView'
| property 'blueprint' -> object with constructor 'LViewBlueprint'
--- index 1 closes the circle
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'TView'
| property 'blueprint' -> object with constructor 'LViewBlueprint'
--- index 1 closes the circle
at JSON.stringify (<anonymous>)
at comms.js:46
at Object.u [as sendMessage] (comms.js:66)
at createWidget.js:157
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:41464)
at ZoneDelegate.invoke (zone-evergreen.js:363)
at Zone.run (zone-evergreen.js:123)
at zone-evergreen.js:857
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at resolvePromise (zone-evergreen.js:798)
at zone-evergreen.js:864
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41442)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
at invokeTask (zone-evergreen.js:1621)
at HTMLIFrameElement.globalZoneAwareCallback (zone-evergreen.js:1647)
Cloudinary.UploadWidget - encountered error ! TypeError: Cannot read property 'handleFiles' of undefined
at createWidget.js:100
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:41464)
at ZoneDelegate.invoke (zone-evergreen.js:363)
at Zone.run (zone-evergreen.js:123)
at zone-evergreen.js:857
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41442)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
Just wanted to give a report on this Problem, since I believe that all upload widget users with angular 9 will face this Problem. Hope this Forum is the right place for it.
Have a great day and thanks in advance, cheers
-
Hi Frank,
May I please check which version of the Cloudinary Angular plugin you're using?
If it isn't v1.2.2, can I ask you to upgrade to that and try it again and let me know if it's working for you afterward? That version was released yesterday and it includes fixes for several Angular 9 issues so it may fix the issue you're encountering
Regards,
Stephen0 -
Hi Stephen,
I haven't been using any cloudinary angular plugin, because I didn't find a specific cloudinary upload widget for angular. I just used the plain js cloudinary upload widget in angular, using plain js, by loading the source from <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
Do you offer a specific angular upload widget for angular, which is not the plain js upload widget? I yes, I didn't find any.
Thanks a lot for your help!
Cheers, Frank
0 -
@Frank
Since the upload widget is built on JS, it has been used across many other front-end frameworks by referring to the plain js upload widget which provided a relatively easy integration. I'll consult with our team internally if this is something that should be added in the future, but at the moment, there isn't a way to include the upload widget without using js.
0 -
Hi Daniel,
Thanks for the reply! Maybe my english is just too bad, but something has been entirely misunderstood here. I didn't ever mention, that I want to use the upload widget without js, did I? Please read my post one more time.
The Problem is, as described in the headline of this post:
The cloudinary upload widget seems to be incompatible with angular 9, which means that you simply can't create the cloudinary upload widget as is in an angular 9 Application, which has been working very well in Angular 8. The steps below, describe what's necessary to reproduce the issue. I believe that, nobody can currently use the cloudinary upload widget in anguular 9. Please take the time to read the issue carefully, before you reply.
1. I included the script tag, to get the widget source:<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
2. I created the the widget in my app.component.ts:
ngAfterViewInit(){
cloudinary.openUploadWidget({
cloudName: cloudName,
apiKey : apiKey,
inlineContainer:document.getElementById('my-widget-container'),
}, (err, result)=>{
console.log(err)
console.log(result)
})}
3. I added the inline container in my app.component.html:
<div id="my-widget-container"></div>
Done. This is very easy to reproduce. Please reproduce it and try to open the widget using angular 9. I am not talking about an angular 9 plugin, or using the widget without javascript. Please create an angular 9 apllication and just implement the cloudinary upload widget (using an inline container), the steps I am describing above are the simplest steps to implement the cloudinary upload widget and reproduce the issue.
Thanks!
0 -
@Frank
I see where the misunderstanding came from, we will look into it and see what might be going.
Updates to follow.0 -
@Frank
Here is a sample using Angular 9 and upload widget:https://codesandbox.io/s/cloudinary-angular-media-library-ofmex?file=/src/main.ts
Let me know if it works out for you.
1 -
Hello Daniel,
Thank you so much for creating the sample Project!!
Like I mentioned in my first two posts, the error only occurs, when using the upload widget with inlineContainer mode, but your sample code is created without inlineContainer...I also made a mistake telling you, that the error occurs in angular 9, but it actually occurs in angular 9.1.1. Sorry for that.
However, I tried to update your sample to angular 9.1.1 and used it with inlineContainer, which also worked. Very strange. I took a second look at my own application, but I couldn't find the difference or a reason, why it's not working. For testing purposes I created an entirely fresh angular application v.9.1.1 using the angular client and added the code like mentioned in the above posts. Still the error occurs. I only added the source in index.html, the cloudinary opener in app.component.ts and the inline container element in app.component.html.
What I noticed though is, that the error occurs in my application when I use inlineContainer:document.getElementById('my-widget-container'), but it works perfectly fine when using inlineContainer:'#my-widget-container', just as a string selector.
So for me this solved the issue, but maybe it's worth for you as well to have a second look, why this happens? Please let me know if you want me to upload the code for you.
Thanks for your help and have a great day.
Cheers, Frank
0 -
Hey Frank, thank you for the additional details, and I'm glad that you found a workaround!
Could you kindly share your code or GitHub repository, so we could try to figure out the issue's origin of using the document object in that context? Could it be that the 'my-widget-container' element is not yet initialized at the time of opening the widget?
Regards,
Eyal0
Post is closed for comments.
Comments
8 comments