createField / onInput with Files/Blobs

[timothyallan]

Describe the bug

I've got a element which lets the user create a blob or File object. I then want to use that blob/file object as a field in a form I'm submitting to the server, along with the usual name/description text fields. I'm migrating from another forms package where I'd had this working well.

I'm using onInput from createField to set the canvases output to a <input use:field type="file" /> element, however, whenever I do onInput(blob);, I can see the data store update with the field name, but the field value in the data store is undefined.

If I change the input to type text, the value updates to a string value of "[object File]". Is it possible to update file input fields like this, or to use a hidden input, but not force the value to a string?

I've also tried onInput with a File and not a blob, as well as onInput({files:[file]}) to try and replicate the shape of what a file input works with, but still no go.

Which package/s are you using?

@felte/solid (SolidJS)

Environment

• OS: MacOs
• Browser: any
• Version:
• "@felte/reporter-solid": "^1.2.2",
• "@felte/solid": "^1.2.2",

To reproduce

Get a blob and save it to a form field like the following pseudocode.

const { field, onInput } = createField(formKey);

const saveBlob= (blob: Blob | null) => {
      onInput(blob);
    };

canvas.toBlob(saveBlob, 'image/jpeg');`


<input use:field type="file" />
<canvas ref={canvas} />

Small reproduction example

No response

Screenshots

No response

Additional context

No response