x-modelable and FileList issues

[JayTennant]

Alpine.js version

v3.15.11

Browser and operating system

Chrome

What do you need help with?

I'm writing some custom tags in CFML to encapsulate some Alpine components. x-modelable is a perfect use case for this, but it's not working for one. In my custom CFML file_selector tag that encapsulates:

<input type="file" @change.stop="addFiles( Array.from( $event.target.files ) )" />

I have a FileList object that is converted to an array and passed to addFiles(), which updates the modelable value.

This works all fine and good within the Alpine component: I see an array of File objects, and can grab the name, size, type, etc. from them. But the Alpine variable passed in through x-model is getting empty File objects.

Importantly, File objects do not own enumerable properties, instead, as platform objects, they have Browser provided interfaces (like "name", "size", "type"). In looking through the source, it appears the directive x-modelable uses the entangle() method that does a JSON round-trip clone of the objects, using JSON.parse( JSON.stringify( value ) ), see:

alpine/packages/alpinejs/src/entangle.js

Line 39 in a0450cc

? JSON.parse(JSON.stringify(value))

But JSON clones copy the object's own enumerable properties, so that explains why the File objects are copied to the x-model variable as empty objects.

I'm considering a few workarounds to avoid the issues with x-modelable, including:

• In CFML, rendering the x-model attribute added to the custom tag into an x-effect, as in: <cf_file_selector x-model="files" /> renders as <div x-data="{...}" x-effect="#attributes["x-model"]# = modelValue">...</div>
• Dispatching an event that is caught on the containing div of the custom tag, such as: $dispatch( 'change', { files, errors } )

Does anybody else have any thoughts about approaching this? Perhaps could something about this be noted in the docs for x-modelable? Or perhaps could a change be considered for how entangle() clones the objects (ie. structuredClone() and detecting "plain object JSON vs. other objects")? I realize any changes to entangle() also affect how comparisons are made, so maybe that's too much work.

How do you expect it to work?

It'd be nice if File platform objects would work with x-modelable.

Please confirm

• I have searched existing discussions to check this hasn't already been answered.
• I have provided code samples as text and NOT images.

[ekwoka]

The ideal way to handle this kind of stuff to use signals so that entangled properties can actually just use the same underlying signal, instead of needing to do this clunky work to keep two reactive values in sync.