Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comma escaping for text overlays is not working correctly #702

Open
greimers opened this issue Feb 19, 2025 · 2 comments
Open

Comma escaping for text overlays is not working correctly #702

greimers opened this issue Feb 19, 2025 · 2 comments

Comments

@greimers
Copy link

Describe the bug in a sentence or two.

Adding text overlays with commas (,) on videos results in %2C escape sequences in the overlay.
Other characters like quotes, dashes, question marks, and percent are automatically handled correctly and appear correctly in the overlay.
Manually escaping the comma does not work either because the % is automatically escaped.

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Babel - Babel errors or cross browser issues
[ ] Performance - Performance issues
[x] Behaviour - Functions aren’t working as expected (Such as generate URL)
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types - For typescript users who are having problems with our d.ts files
[ ] Other (Specify)

Steps to reproduce

Create a text overlay on a video that contains a comma.

Sample code:

let transformations = [
    { width: 900, height: 900, crop: "fill" },
    { color: "#ffffff", 
        overlay: { 
            font_family: font, 
            font_size: 48, 
            text: "So, \"here\" & here are 10% special chars - right?", 
            text_align: "center" 
        }, 
        width: 800, crop: "fit" }, 
    { duration: 2.0 },
    { flags: "layer_apply", gravity: gravity, x: 0, y: 0.05, start_offset: 0.0, end_offset: 2.0 }
];
      
      
let namedVideoTransformation = "myTransformation";
await cloudinary.v2.api.create_transformation(namedVideoTransformation, {
    transformation: transformations,
});
videoUri = cloudinary.url("folder/video.mp4", {
    resource_type: "video",
    transformation: [namedVideoTransformation],
});

Error screenshots

Image

Versions and Libraries (fill in the version numbers)

Cloudinary_NPM SDK version 2.5.1
Node - 23.7.0
NPM - 10.9.2

@tommyg-cld
Copy link
Contributor

tommyg-cld commented Feb 20, 2025

@greimers when using special characters like commas, they need to be URL encoded and double-escaped as per Special characters. Our SDKs handle this automatically meaning it will convert the comma to %252C but when creating a named transformation, it doesn't seem necessary to double-escape which our SDKs don't seem to take into account so we'll look into resolving this further.

For now as a workaroud, you can create a named transformation using a string and URL encoding the comma yourself e.g.

cloudinary.api.create_transformation('small_fill3', 
   'co_rgb:FF0000,l_text:arial_50_normal_left:So%2here/fl_layer_apply')
.then(result=>console.log(result));

@momoip
Copy link

momoip commented Mar 3, 2025

Hi @greimers,
The issue is a known one in v1 SDKs. (NodeJS v2 is a v1 SDK).
A better workaround would be to create a transformation string from that object using generate_transformation_string function and URL decode it once. and pass the resulting string to create_transformation function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants