Value converter for hiding file-extensions

Help Requests
1

Hi!

My requirement is to hide file extensions and stop users from entering any new file extensions.
With the following code, if the user enters multiple dots, they are prevented from entering the view-model by the value-converter, yet they show up in the input, until the user enters a different character,
then all dots are cleaned from the input.
I cannot figure out, why the input that uses the value-converter on it´sbound value behaves like this?

export class HideFileExtensionValueConverter {
// everything after the first dot, for example “.spec.ts”
cachedFileExtensions;

toView(value) {
let [name, …extension] = value.split(“.”);
this.cachedFileExtensions = extension;
return name;
}

fromView(value) {
let trimmed = value.trimEnd();
let cleaned = trimmed.split(‘.’).join(“”);
return ${cleaned}.${this.cachedFileExtensions};
}
}

1 Like
2

To my knowledge, a valueconverter is always a singleton (Sorry short on time, hope that this helps!)

1 Like
3

Thank you, Sjaak. That´s good to know.
:slight_smile:

1 Like
4

I changed the fromView method to this

fromView(value) {
let trimmed = value.trimEnd();
let cleaned = trimmed.split(‘.’).join(“”);
return ${cleaned}.${this.cachedFileExtensions.join(".")};
}

and because i was suspicious, that the binding would not update on each input, i use the converter like this

value.bind=“file.name | hideFileExtension & updateTrigger: ‘input’”/>

Now before returning a value from view, all dots are removed. The initial file extensions are cached away and reapplied on each trip from V to VM et vice versa.

Yet, in the input, the dots still show.

So if i enter “foo…” this shows in the input-element. Then, when i enter an additional “bar” to “foo…” -
the big myth strikes and the displayed value is “foobar”, the return value of from view is e.g. “foobar.jpg” (as expected) but yet, the dots are magically removed from the input after the showed up somehow.

I guess it is okay, but it troubles me not to know, where the state of the input is getting the dots from, when i intercept each change with the converter.

Is there an explanation or should i try using a custom binding-behavior instead?

Best

1 Like
5

Please include your full value converter now. I will spin up a sandbox.

2 Likes
6

Hello Brandon,

what a great idea! I had to spin it up myself just to try.

Is it properly configured, can you run it?
Best

2 Likes
7

I believe the dirty checker is getting confused because when you type the . it goes through the converted which then strips it. Then it compares against the stored value which also doesn’t have a . so the input isn’t updated. @bigopon

1 Like
8

Thank you @brandonseydel,

signaling the binding to update solved the problem.
I updated the Sandbox accordingly.

Thank you very much, Best
Alfhir

2 Likes