Fix encoding of publicId

* Fix incorrect encoding on toURL

Author: strausr

__TESTS__/unit/url/encoding.test.ts

@@ -19,7 +19,13 @@ describe('Tests for Encoding the URL', () => {
   it('Should encode cloudinary characters (",") in a publicID', () => {
     const url = createNewImage('sam,ple')
       .toURL();
-    expect(url).toBe('https://res.cloudinary.com/demo/image/upload/sam%252Cple');
+    expect(url).toBe('https://res.cloudinary.com/demo/image/upload/sam%2Cple');
+  });
+
+  it('Should encode cloudinary characters ("☺") in a publicID', () => {
+    const url = createNewImage('sample☺')
+      .toURL();
+    expect(url).toBe('https://res.cloudinary.com/demo/image/upload/sample%E2%98%BA');
   });
 
   it('Does not mutate valid / in publicID', () => {

src/assets/CloudinaryFile.ts

@@ -264,24 +264,32 @@ class CloudinaryFile {
     const prefix = getUrlPrefix(this.cloudName, this.urlConfig);
     const transformationString = transformation ? transformation.toString() : '';
     const version = getUrlVersion(this.publicID, this.version, this.urlConfig.forceVersion);
+    const publicID = this.publicID;
 
-    const publicID = this.publicID
-      // Serialize the publicID, but leave slashes alone.
-      // we can't use serializeCloudinaryCharacters because that does both things (, and /)
-      .replace(/,/g, '%2C');
+    if (typeof transformation === 'string') {
 
-    // Resource type is a mixture of assetType, deliveryType and various URL Configurations
-    // Note how `suffix` changes both image/upload (resourceType) and also is appended at the end
-    const url = [prefix, this.getResourceType(), this.getSignature(), transformationString, version, publicID, this.suffix]
-      .filter((a) => a)
-      .join('/');
+      const url = [prefix, this.getResourceType(), this.getSignature(), transformationString, version, publicID.replace(/,/g, '%2C'), this.suffix]
+        .filter((a) => a)
+        .join('/');
 
-    if (typeof transformation === 'string') {
       return url;
     } else {
-      const safeURL = encodeURI(url)
-        .replace(/\?/g, '%3F')
-        .replace(/=/g, '%3D');
+      // Avoid applying encodeURI on entire string in case where we have transformations with comma (i.e. f_auto,q_auto)
+      // Since encodeURI does not encode commas we replace commas *only* on the publicID
+      const safeURL =
+        [
+          encodeURI(prefix),
+          this.getResourceType(),
+          this.getSignature(),
+          encodeURI(transformationString),
+          version,
+          encodeURI(publicID).replace(/,/g, '%2C'),
+          this.suffix && encodeURI(this.suffix)
+        ]
+          .filter((a) => a)
+          .join('/')
+          .replace(/\?/g, '%3F')
+          .replace(/=/g, '%3D');
 
       const queryParams = new URLSearchParams(this.urlConfig.queryParams as Record<string, string>);