opencart - Url of inserted images is not encoded properly

Question

When inserting an image inside the ckeditor the url output is http://site.com/image/data/004 - Copy.jpg instead of http://site.com/image/data/004%20-%20Copy.jpg

Keep in mind that images get displayed properly on the site but when I want to send an email the email client (gmail for example) encodes the url file name to http://site.com/image/data/004+-+Copy.jpg and that returns a 404.

I can fix this with rawurlencode() but I can't seem to find where to add it. Any ideas? enter image description here

EDIT: I found where to edit (filemanager.tpl)

window.opener.CKEDITOR.tools.callFunction(<?php echo $fckeditor; ?>, '<?php echo $directory; ?>' + $(this).find('input[name=\'image\']').attr('value'));

How do I encode $(this).find('input[name=\'image\']').attr('value') with rawurlencode?

Perhaps a quick and dirty fix would be to not upload files that has spaces in them? Or am I missing something (I don't know/use opencart) — Daan Timmer, Dec 19 '12 at 09:06
Yes, that would be an easy fix but there's already a lot of images and this site is for a client. — Cris, Dec 19 '12 at 09:07
Renaming images also would be the right thing to do, not just a quick fix, IMHO. Going other way sounds more like a quick fix to me. For easy batch renaming, see this post: [ bulk-rename-files-in-a-folder-php](http://stackoverflow.com/questions/4993590/bulk-rename-files-in-a-folder-php). — B-and-P, Dec 19 '12 at 09:28

score 3 · Accepted Answer · answered Dec 19 '12 at 09:22

Obviously, you can't use PHP's rawurlencode directly, but you can improvise by implementing your own JavaScript version of the function...

function rawurlencode (str) {
    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
    replace(/\)/g, '%29').replace(/\*/g, '%2A');
}

And...

rawurlencode($(this).find('input[name=\'image\']').attr('value'));

opencart - Url of inserted images is not encoded properly

1 Answers1