Upload widget and Angular 9 incompatible

Comments

8 comments

  • Avatar
    Daniel Mendoza

    @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
    Comment actions Permalink
  • Avatar
    Stephen Doyle

    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,
    Stephen

    0
    Comment actions Permalink
  • Avatar
    Frank Geertsma

    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
    Comment actions Permalink
  • Avatar
    Daniel Mendoza

    @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
    Comment actions Permalink
  • Avatar
    Frank Geertsma

    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
    Comment actions Permalink
  • Avatar
    Daniel Mendoza

    @Frank

    I see where the misunderstanding came from, we will look into it and see what might be going. 
    Updates to follow.

    0
    Comment actions Permalink
  • Avatar
    Frank Geertsma

    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
    Comment actions Permalink
  • Avatar
    Eyal Katz Talmon

    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,
    Eyal

    0
    Comment actions Permalink

Please sign in to leave a comment.