CldMediaLibrary component issues

[R0N1n-dev]

The CldMediaLibrary component has issues. It is not working

Version

"@nuxtjs/cloudinary": "^2.4.1", "nuxt": "^3.8.0"

Steps to reproduce

Install module as on docs page Tried to use CldMediaLibrary component as in docs

What is Expected?

It works and shows media library

What is actually happening?

[Baroshem]

Hey,

Thanks for reporting this issue.

I have some questions however because it does not occur on my local environment nor on the deployed documentation as you can see on the attached screenshot

Also, the error message suggests that there is no PropType export in vue plugin for Vite which is not fully related to the module.

PropType is used in ProductGallery (which works on the documentation as well) and MediaLibrary.

[Baroshem]

I have also just tested it on a fresh nuxt 3.8.0 project with NuxtCloudinary 2.4.1 and the MediaLibrary works as expected without errors.

[R0N1n-dev]

New project So can i borrow ur pc

[Baroshem]

I just checked this on stackblitz with 3.8.0 and NuxtCloudinary 2.4.1 and it is showing this bug. You are correct.

I will publish a fix in a sec

[Baroshem]

Can you check on 2.4.2 version?

[R0N1n-dev]

Is it supposed to look like this

[Baroshem]

I have just checked the version 2.4.3 (I needed to publish one more patch version due to the bug in import of types from Vue package for some reason) on stackblitz with nuxt 3.8.0 and it is working correctly.

[Baroshem]

Is it supposed to look like this

Yes, sorry for the trouble! As I mentioned, when testing locally in several scenarios this bug was not appearing (even in a fresh nuxt app)

[R0N1n-dev]

Its rather short and cant adjust it, cant see any images???

[Baroshem]

You can style it with #widget_container.

We can also add a feature request to allow for passing the styles directly to component as class or style. Currently it is inside a div but we can modify it for the next version. If you think that it would be useful, please create an issue and we will plan it accordingly for new versions.

I am closing this issue as the bug was resolved.

[R0N1n-dev]

Nope, I cannot style it except in the console. Anything applied in style tags not working.

Had to add it in console

Styling with style tags is broken for some reason

[colbyfayock]

here's a codesandbox demo that you can add your cloud name and API key to see what it looks like outside of the context of Nuxt for help debugging: https://codesandbox.io/s/media-library-widget-b7hgbg?from-embed

one thing to note is it looks like this is currently embedding it on the page, instead of opening it in a modal, is that the desired experience?

if that is the expectation, the parent container would need to be tall enough to show the entirety of it or have a flexible height that would allow it to expand completely, which depending on your layout could interfere with that

if you want it to open in a modal, inline_container should not be applied. i would expect opening in a modal would be the "happy path" and default experience of this, much like the Upload Widget

[R0N1n-dev]

Dont know what to do,still cant style it except in console. So thankkx alot

[Baroshem]

Hey @R0N1n-dev

I am currently fixing that to allow you to pass some custom styling to the element directly. I was just busy with a release of another module.

New version (2.5.0) will be released this week :)

[R0N1n-dev]

Hey @R0N1n-dev

I am currently fixing that to allow you to pass some custom styling to the element directly. I was just busy with a release of another module.

New version (2.5.0) will be released this week :)

Tried V2.5.1 and still same result. Styling in console still only and useless option. Thanxxxx alot again for closing this issue for no good damn reason coz its still not solved but thats how it goes with u devs. I dont honestly understand how hard it is to let the person who opened the issue close it after confirmation that a fix has worked. Everyone assumes their fixes works and closes issues only to have to open them again with thier annoying templates and all the stuff to fill in to report the same issue again and again.

WTH is up with u people

[Baroshem]

Hey @R0N1n-dev

You are correct. While developing other features for this release, I missed adding this fix. It should be now working with (2.5.2).

With this change, you should be able to style the component like following:

  <CldMediaLibrary
    api-key="12345"
    :button-id="buttonId"
    style="height: 600px"
  />

Please remember that Open Source projects are always open for contributions. If you see something that does not work correctly, you can create a PR with a fix for that and we will appreciate all the help.

Regarding the case of closing the issue. The issue you have created was about the fact that CldMediaLibrary was not working with the published npm package which I explained here and this was fixed with 2.4.3 version and that is why I closed the issue.

The next issue you are referring to, was related to styling the component to match your needs and for that kind of situations it is better to open a new issue or a question as the previous issue was resolved.