Not sure if this bug is caused by my setup or how module resolution works in node (it seems like this is an unclear area), so apologies if this is a false report.

But when I try to use @cloudinary/base in my Next.js project, I get an error about failing to resolve lodash/cloneDeep, and then indeed I see that various places import it like lodash/cloneDeep: https://github.com/cloudinary/cloudinary-js-base/search?q=lodash%2FcloneDeep

but in the package dependencies, it is written as lodash.cloneDeep. Should this be switched to import cloneDeep from 'lodash.cloneDeep';?

I monkey-patched the files locally and changing the import statements to lodash.cloneDeep fixed the issue. I also was able to get the package working locally by just installing lodash to my whole project.

Since when using version 1.10.0 we were seeing the following error when trying to use SSR:

JsRuntimeException: ReferenceError: URLSearchParams is not defined
at createCloudinaryURL (server.js:2:339702) -> …URI(i).replace(/\?/g,"%3F").replace(/=/g,"%3D"),n=new URLSearchParams(this.urlConfig.queryParams);!1…
at toURL (server.js:2:341974)
at Ld (server.js:2:349424)
at SplitContent (server.js:2:575857)
at i (server.js:2:28626)
at server.js:2:29644
at t.render (server.js:2:29677)
at t.read (server.js:2:27548)
at t.renderToString (server.js:2:34395)
at Script [4]:1:16

Reverting back to 1.9.2 resolves the issue

Feature request for Cloudinary JS SDK

Hello! I'm using your SDKs on a react project, and I would need to be able to display the images custom metadata.

Unfortunately, I haven't found any resources about it. Only for nodeJS which isn't what I'm looking for.

Is there any way to access image metadata with CloudinaryJS? Like by doing

cloudinary.url('url/path').metadata // => [{key: value}, {key: value}, ...]

What about "createUploadWidget" in "cloudinary" types?

Hey,
is it recommended to use this library on the server, on the client or both?

Hi, I love this new version of the SDK so far!
But I do which that we would have more contrôl over the image placeholders.

Examples:

• Control some props for each mode: placeholder('pixelate', [10]), placeholder('blur', [600]), ...
• Control the transition from placeholder to definitive image: fade, speed, delay, ... (currently the image simply blinks)

Hi there,
I just wanted to bring up the fact that the latest Cloudinary build (Launched yesterday) is causing our pipeline build to fail. It was working fine last week, and when we tried to push new changes it failed with these errors:

After removing the Cloudinary dependency it works fine.

Please advise.

Thank you

So, I started a job working with a system that serialized all Cloudinary URLs and stored them in the database. I would like to parse these URLs into the appropriate cloudName & publicId so that I can use the Cloudinary API to retrieve these images at any size / format.

Do you provide a utility or regex to do this?

From what I can see setting signUrl on URL config doesn't have any effect. It seems like I need calculate the signature myself.

Am I missing something?

Hi, I have a weird issue where only some of my images with autoFormat() are served as jp2 which just do not display at all in browsers.

To fix this I want to set a format whitelist manually

I've tried:

• image.delivery(format('avif:webp:png:jpg'))
• image.delivery(format(['avif', 'webp', 'png', 'jpg']))
• image.delivery(format([avif(), webp(), png(), jpg()]))

Is there a way to do this?
Else is that a possible feature that could be implemented?

There's a similar issue in the next-cloudinary repo, here. After running transforms on an image using cloudinary/url-gen, then running toURL() on the result, if the original image URL had encoded characters (like %20 for a space, for example), the toURL() function will double-encode them (writing %2520 in place of &20, "%25" being the character code for a percent sign).

Hi!
Is there a way to get URL of a raw file using public_id, similar to cloudinary.url() in cloudinary-core?

Thanks!
Prabs

Hi,
I am using @cloudinary/url-gen version 1.8.0 in with TypeScript with jest. I don’t get this error in the application but while running the test I get the following error:



 RUNS  app/ui/universal/header/header.test.tsx // <— This is my application file
Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/Users/website/node_modules/@cloudinary/url-gen/actions/resize.js:52
import { ResizePadAction } from "./resize/ResizePadAction.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (node:vm:100:7)
    at Runtime.createScriptFromCode (/Users//website/node_modules/jest-runtime/build/index.js:1350:14)
    at Runtime._execModule (/Users/website/node_modules/jest-runtime/build/index.js:1245:25)
    at Runtime._loadModule (/Users/website/node_modules/jest-runtime/build/index.js:898:12)
    at Runtime.requireModule (/Users/website/node_modules/jest-runtime/build/index.js:746:10)
    at Runtime.requireModuleOrMock (/Users/website/node_modules/jest-runtime/build/index.js:919:21)
    at Object.<anonymous> (/Users/website/app/ui/shopping/SinglePageCatalog/ShelfPromotionVideo.tsx:3:1)
    at Runtime._execModule (/Users/website/node_modules/jest-runtime/build/index.js:1299:24)
    at Runtime._loadModule (/Users/website/node_modules/jest-runtime/build/index.js:898:12)
    at Runtime.requireModule (/Users/website/node_modules/jest-runtime/build/index.js:746:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried making the jest and babel config changes described here - https://github.com/cloudinary/js-url-gen#testing-with-jest 

But then I started getting into more errors after this, now starting from my application code - 



 FAIL  app/selectors/selector.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/website/app/test/jest-mock-setup.ts:2
    import "jest-styled-components";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)



I am not sure how to fix this. Do you folks have any clue? 

Here is some more info about the my platform:

"@cloudinary/react": "^1.4.2",
"@cloudinary/url-gen": "^1.8.0",
     "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
"typescript": "~4.5.5",

Thanks,

Hey folks
I am referring to this particular article from the cloudinary blog
I am trying to replicate this functionality in this nextgen SDK. I can do the overlay, but cannot figure out how to make the text lines wrap
Would love some pointers.

function profilePictureWithText({
  width,
  height,
  textString,
  font = 'poppins',
  fontSize,
}: ProfilePictureWithTextTransformationPropsType): ImageTransformation {
  return (
    new ImageTransformation()
      .resize(
        thumbnail()
          .width(width)
          .height(height)
          .gravity(focusOn(face()))
          .zoom(0.6)
      )
      .backgroundColor(Color.BLACK)
      .effect(gradientFade().verticalStartPoint(-0.5))
      // .overlay(source(text('My Long and aweson Text', 'montserrat_24')))
      .overlay(
        source(
          text(
            textString,
            new TextStyle(font, fontSize).textAlignment('center').lineSpacing(2)
          ).textColor(Color.WHITE)
        ).position(
          new Position()
            .gravity(compass(south()))
            .offsetY(30)
            .allowOverflow(false)
        )
      )
      .delivery(defaultImage('brooke-cagle-LCcFI_26diA-unsplash_a1xohb.jpg'))
      // .delivery(format(autoFormat())) // was not working on responsively app
      .delivery(quality(autoQuality()))
  );
}

Hi,
I currently in process of migrating from cloudinary-core to @cloudinary/url-gen, and one of the biggest challenge I am facing is around video transformations.

In my current implementation, I store all the transformations as an array of objects in database and use cloudinary.url method to inject the json for transformation.

const transformation = [
  {
    overlay: { text: "some text", fontSize: 40},
    gravity: "south",
    x: 100,
    y: 600,
    startOffset: "15",
    endOffset: "20",
    color: "#ffffff"
  }
]

const url = cloudinary.url("videoPublicId", {
  resource_type: "video",
  transformation,
  sourceTypes: ["mp4"]
})

Is there a way to do something similar using @cloudinary/url-gen? Or, do I have to resort to the method chain?

Any help is much appreciated!

Thanks!

Prabs

In the createCloudinaryURL method, the comma , character in the publicID is being encoded twice.

This results in %2C being transformed into %252C, which causes issues when trying to access images with a comma in their publicID.

This issue is causing 404 errors when trying to access images with a comma in their publicID, as the double-encoded comma does not match the actual publicID of the image.

https://github.com/cloudinary/js-url-gen/blob/master/src/assets/CloudinaryFile.ts

the issue is in these lines of code

const publicID = this.publicID
  .replace(/,/g, '%2C');

const safeURL = encodeURI(url)
  .replace(/\?/g, '%3F')
  .replace(/=/g, '%3D')

A fix could be to replace the double encoded characters so single encoded

const safeURL = encodeURI(url)
  .replace(/\?/g, '%3F')
  .replace(/=/g, '%3D')
  .replace(/%252C/g, '%2C');

I've tested this fix in my application(s) with multiple characters, commas, and slashes, and it seems to work correctly.

Hi, I'm looking at how to create this but using this library, instead of hardcoding it like this:

   const cloudinaryUrl = `https://res.cloudinary.com/${cloudName}/image/upload/${mapping}/${publicID}`;

I was wondering if there was a way to show an image preview of my file saved on Cloudinary. It might be made available for specific document types e.g. .pdf, images, .docx, etc. If this doesn't already exist, I hope it can be added to Cloudinary as this would make the package even more awesome.

Hi,
Really want this to work so we can have a smaller bundle.

I tried to convert parts of an app to use this SDK and compared the old SDK urls side by side - here are some examples:
(-old, +new)

-https://rs.wescover.com/c_pad,h_250,w_250/v1/wescover-image-store/e3toavbx0drg7xxozw8c.jpg
+https://rs.wescover.com/c_pad,h_250,w_250/f_jpg/v1/wescover-image-store/e3toavbx0drg7xxozw8c

-https://rs.wescover.com/c_limit,f_auto,q_auto,w_500/v1/wescover-image-store/lhxpyb380gvknqrmdxbj
+https://rs.wescover.com/c_limit,w_500/q_auto/f_auto/v1/wescover-image-store/lhxpyb380gvknqrmdxbj

As you can see, the URLs are not exactly compatible - usage of the / approach vs , and appending an extension vs using the f_ modifier - make the old URLs and new not compatible.

I know the output image will be the same! So why is this important?

Some sites (like us) have been using the old URLs for years, with many (many) images already crawled by search engines (like Google) and in use.
Swapping all URLs suddenly, even if the same image is produced would cause a massive re-crawl of all images since the URL means "another image". The result is:

1. Huge waste of crawl budget
2. Huge waste of transfer bandwidth from Cloudinary (which costs$$)
3. Possible transformations if Cloudinary thinks those new URLs need a new transform (even if the output is identical)
4. Possible, image ranking could be lost since there is no such thing as "image 404" to advertise to google.

This means for us, URL equivalency, given the same transformation needs is extremely important.

WDYT?

Hi all, It appears that the typescript definitions are broken for the UMD bundle import.

The typescript defs work when importing from @cloudinary/url-gen/bundles/umd, which is incorrect but break when using the correct @cloudinary/url-gen/bundles/umd/base import.

https://codesandbox.io/s/quiet-sound-453yf?file=/pages/index.tsx

Originally posted by @ReallyBadNews in #444 (comment)

In

The check for cloudName should be moved into getUrlPrefix and we should only throw when omitting the cloud name for branches where it's actually utilized.

Hi, I have a slider component that renders a single image at a time.
This means that each image is fetched as it should be displayed/visible.

I want to prefetch the next 2 images, but I don't know what the best way to approach this is.

I'm using the SDK V2 (with react), along with the responsive(plugin), so I would need to preserve the plugin behavior while prefetching.

Thanks

Hello. We've been implementing the url-gen package for an app that we're currently developing. I've been using it to grab some images we get from an external server provided to us by our client and transforming them with Cloudinary. However, we've been noticing that when our client updates the images, without changing the image's name, the url-gen package continues to deliver the same image that'd been stored before in our cloudinary account.

Simply put, is there a way to delete or replace an image that has been previously generated with url-gen? Or is it recommended to use another cloudinary package to handle this?

I'll add a sample of how we're using cloudinary below

const cld = new Cloudinary({
  cloud: {
    cloudName: '<our token>',
  },
})

export function resizeCarouselImage(url: string, width: number, height: number, radius: number) {
  const resizedImage = cloudinaryImage(url, width, height)
    .roundCorners(byRadius(radius))
    .toURL()
  return resizedImage
}

function cloudinaryImage(url: string, width: number, height: number) {
  const cldImage = cld.image(url).setDeliveryType('fetch')
  const modifiedImage = cldImage.resize(
    fit()
      .width(width)
      .height(height)
  )
  return modifiedImage
}

The lack of documentation on import statement is frustrating. For example: https://cloudinary.com/blog/adaptive_browser_based_image_format_delivery

I know this is what I need .delivery(quality(auto()));

But there is no documentation on where the import for quality is.

The case for Declerative APIs

The current API of the SDK is imperative.
@yoadsn mentioned in #382 that some users would benefit from a declarative API as well.

Points of interest

• The API should be consistent across methods (Meaning we can't pick and choose which APIs have a declarative counterpart)
• The API should avoid using magical strings since we aim to provide the best dev experience even to people with weak IDEs.
• We might relax the constraint above if we consider the declarative API for more advanced users, but this needs to be explored before deciding.

Trivial example

Imperative

new Image().resize(scale().width(100).height(100)) 

Declerative

new Image().resize(scale({
  width: 100,
  height: 100
}))

Hi,

We are hoping to use token-based authentication to secure access to image folders to users with access to those folders.

We have implemented token generation in the backend which includes an appropriate acl of folders they should have access to.

The client side (React) gets this token after login and then the plan is to append it to all image delivery urls. Is there a way to do this with current SDK?

I was hoping there might be an option to do something like:

new Cloudinary({
  cloud: {
    cloudName: process.env.REACT_APP_CLOUDINARY_DOMAIN,
  },
  url: {
    privateCdn: true,
    secure: true,
    token: cloudinaryToken,
  },
});