Hello,
In my application I am loading a form component where I want to have a file field as well. I have created custom components for each input type.
So I have form-filedrop.html
<template>
<div class="form-filedrop">
<label>${label}</label>
<input type="file" files.bind="selectedFiles">
</div>
</template>
And form-filedrop.ts
import { autoinject, bindable } from "aurelia-framework";
@autoinject
export class FormFiledrop {
@bindable label = "Files";
selectedFiles: FileList;
}
And then in my form view (simplified):
<template>
<require from="resources/components/form/form-filedrop"></require>
</template>
<div>
<form-filedrop label="File"></form-filedrop>
</div
But somehow this makes the whole form appear blank in my site… (no error in console)
However - I the following works:
form-filedrop.html
<template>
<div class="form-filedrop">
<label>${label}</label>
<input type="file" files="on-loaded.bind: filecallback">
</div>
</template>
form-filedrop.ts
import { autoinject, bindable } from "aurelia-framework";
@autoinject
export class FormFiledrop extends FormElement {
@bindable label = "Files";
filecallback = (file, data) => {
console.log(file);
}
}
So I can bind to a function, but not to a FileList property.
Anyone have any tips to push me in the right direction to get this sorted?
