Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Add encodeFilePath to FileUtils to convert file paths into encoded strings (replace metacharacters such as %, @, $, #, etc.) #9190

Merged
merged 1 commit into from
Nov 21, 2014

Conversation

Mark-Simulacrum
Copy link
Contributor

Cannot use encodeURI/encodeURIComponent because they replace # with %25, which is incorrect - should be replaced by %23.

I'm not sure if there is a Brackets' utility for this already (I searched for it but couldn't find it).

I've tested with test#tt.jpg and test%tt.jpg, but nothing else - are there any other special characters that should be added to this replace scheme?

Should this be moved to a module in utils/ and loaded from ImageViewer?

Fixes #9117.

@Mark-Simulacrum
Copy link
Contributor Author

It's possible that this will also be fixed by the Project Manager Revamp (#9015)

@redmunds
Copy link
Contributor

@Mark-Simulacrum Yes, this should be in a reusable function in file/FileUtils.js. encodeURI/encodeURIComponent assume that # is used for a page anchor and is not part of the file name.

@marcelgerber
Copy link
Contributor

Well, in Chrome 37, encodeURIComponent("#"); actually returns %23 as expected...

@redmunds
Copy link
Contributor

In #9117, # appears in filename so encodeURI() should be used (not encodeURIComponent()).

@marcelgerber
Copy link
Contributor

Oops, didn't think about that. So those are the chars encodeURI() doesn't encode: #$&+,/:;=?@
We should test all of them.

@Mark-Simulacrum
Copy link
Contributor Author

Ready for another review.

@peterflynn
Copy link
Member

@Mark-Simulacrum Can you add some unit tests to this?

@Mark-Simulacrum
Copy link
Contributor Author

Sure - they should go in FileUtils-test.js, right?

@peterflynn
Copy link
Member

Yep!

path = path.replace(/&/g, '%26');
path = path.replace(/\+/g, '%2B');
path = path.replace(/,/g, '%2C');
path = path.replace(/\//g, '%2F');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we be replacing / with %2F? Since this is not a valid symbol in a file name (directory separator), perhaps this should not be replaced?

@Mark-Simulacrum Mark-Simulacrum changed the title Replace # and % in Image URLs to fix loading of images with these characters in the fileName Add encodeFilePath to FileUtils to convert file paths into encoded strings (replace metacharacters such as %, @, $, #, etc.) Sep 25, 2014
@Mark-Simulacrum
Copy link
Contributor Author

Is it standard Brackets policy to squash commits? I currently have 6 in this branch, should I squash them (not now, but when final review is completed)?

@ingorichter
Copy link
Contributor

We don't require them to be squashed, but you can do it, if you like. I'm fine with not having them squashed.

@Mark-Simulacrum
Copy link
Contributor Author

I don't like squashing commits myself - since it effectively erases history.

@peterflynn
Copy link
Member

@Mark-Simulacrum Remind me -- why do we need a custom utility for this instead of just using the built-in encodeURI()/encodeURIComponent()? Your note at top mentions "#" being handled wrong, but if I do encodeURIComponent("#") in our dev tools console today, I get "%23" which seems correct.

@marcelgerber
Copy link
Contributor

@peterflynn We don't want to replace /.

@Mark-Simulacrum
Copy link
Contributor Author

@marcelgerber @peterflynn Perhaps the correct fix for that would be to use encodeURIComponent/encodeURI, and then replace %2F with what it represents, /. Maybe this causes other issues, though.

@RaymondLim
Copy link
Contributor

@Mark-Simulacrum I think what you need is only encodeURIComponent, but you must first split the path into sub path array before calling encodeURIComponent.

var pathArray = path.split("/");
    pathArray.forEach(function (subPath, index, encodedPath) {
        encodedPath[index] = encodeURIComponent(subPath);
    });
    encodedPath.join("/");

@Mark-Simulacrum
Copy link
Contributor Author

@RaymondLim Okay. I've implemented the suggested change in 592febc, and merged with master. Ready for another review.

function encodeFilePath(path) {
var pathArray = path.split("/");
var encodedPath = [];
_.forEach(pathArray, function(subPath, index) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could use encodedPath = pathArray.map(...) instead.
That would actually make the line above unnecessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should I use LoDash _.map or native map?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that using LoDash _.map is preferable, due to the speed increase, since this is a utility method that may be called quite often.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@RaymondLim Implemented with LoDash.

@Mark-Simulacrum
Copy link
Contributor Author

Committed test changes and fixed my mistake with _.map assigning to the array.

@@ -533,6 +534,14 @@ define(function (require, exports, module) {
return 0;
}

function encodeFilePath(path) {
var pathArray = path.split("/");
pathArray = _.map(pathArray, function (subPath) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's more canonical to use native pathArray.map(...) here. We usually only use the Lodash versions when traversing Object key-value pairs instead of Arrays.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And once that's fixed I think you'll need to remove the import above too, else JSHint will complain about the unused var

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@peterflynn
Copy link
Member

Also: It would be good to put up a squashed version of the PR at this point, since 12 commits is a lot for a relatively small change like this.

@Mark-Simulacrum Mark-Simulacrum force-pushed the issue-9117 branch 2 times, most recently from 05c4982 to 73ff6c8 Compare October 20, 2014 20:29
@Mark-Simulacrum
Copy link
Contributor Author

Didn't see the point of making a new PR -- I've rebased onto master here.

@peterflynn
Copy link
Member

Thanks!

Use this function to properly set the source of images in ImageViewer.
@Mark-Simulacrum
Copy link
Contributor Author

Fixed merge conflict, squashed.

@le717 le717 mentioned this pull request Nov 21, 2014
@RaymondLim
Copy link
Contributor

LGTM. Merging.

@RaymondLim RaymondLim self-assigned this Nov 21, 2014
RaymondLim added a commit that referenced this pull request Nov 21, 2014
Add encodeFilePath to FileUtils to convert file paths into encoded strings (replace metacharacters such as %, @, $, #, etc.)
@RaymondLim RaymondLim merged commit 031827e into adobe:master Nov 21, 2014
@Mark-Simulacrum Mark-Simulacrum deleted the issue-9117 branch November 22, 2014 00:29
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Image Preview]: Image preview works incorrectly if the file name contains special character "#" or "%"
6 participants