# Files.bind issue

**URL:** <https://discourse.aurelia.io/t/files-bind-issue/1887>\
**Category:** Help Requests\
**Created:** [November 14, 2018, 3:39pm UTC](https://discourse.aurelia.io/t/files-bind-issue/1887 "2018-11-14T15:39:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![trondulseth](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/trondulseth/32/1179_2.png) [@trondulseth](https://discourse.aurelia.io/u/trondulseth)\
**Post date:** [November 14, 2018, 3:39pm UTC](https://discourse.aurelia.io/t/files-bind-issue/1887/1 "2018-11-14T15:39:35Z")

</div>

**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_

```auto
<template>
	<div class="form-filedrop">
		<label>${label}</label>
		<input type="file" files.bind="selectedFiles">
	</div>
</template>

```

And _form-filedrop.ts_

```auto
import { autoinject, bindable } from "aurelia-framework";

@autoinject
export class FormFiledrop {
	@bindable label = "Files";
	selectedFiles: FileList;
}

```

And then in my form view (simplified):

```auto
<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_

```auto
<template>
	<div class="form-filedrop">
		<label>${label}</label>
		<input type="file" files="on-loaded.bind: filecallback">
	</div>
</template>

```

_form-filedrop.ts_

```auto
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?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 15, 2018, 2:08am UTC](https://discourse.aurelia.io/t/files-bind-issue/1887/2 "2018-11-15T02:08:24Z")

</div>

If the whole form turns blank, I think it’s either html structure or css issues, could you check that? Also from what it looks like, there shouldn’t be any issues. Can you share a small repro based on this [https://codesandbox.io/s/zw9zjy0683](https://codesandbox.io/s/zw9zjy0683)

---

<div class="post-metadata">

**Author:** ![trondulseth](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/trondulseth/32/1179_2.png) [@trondulseth](https://discourse.aurelia.io/u/trondulseth)\
**Post date:** [November 15, 2018, 8:51am UTC](https://discourse.aurelia.io/t/files-bind-issue/1887/3 "2018-11-15T08:51:08Z")

</div>

Thanks @bigopon - it’s not html/css problems as inspecting the code shows that the form is not loaded at all. Also the one thing that makes it load or not load is if I have the **files.bind** binding on the input or not.

One thought… the Aurelia app in question was started late 2016/early 2017 - could it be a problem that the Aurelia version is to old?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 15, 2018, 9:02am UTC](https://discourse.aurelia.io/t/files-bind-issue/1887/4 "2018-11-15T09:02:50Z")

</div>

If it’s not loaded, then it’s probably something else, like mismatching names. The frameworks hasn’t gone through a breaking change for its core templating feature, so it shouldn’t break your app. I would suggest renaming everything, and move that component to a different folder to track where the issue(s) is/ are.

---

<div class="post-metadata">

**Author:** ![trondulseth](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/trondulseth/32/1179_2.png) [@trondulseth](https://discourse.aurelia.io/u/trondulseth)\
**Post date:** [November 15, 2018, 9:05am UTC](https://discourse.aurelia.io/t/files-bind-issue/1887/5 "2018-11-15T09:05:57Z")

</div>

Thanks again 😄

I’m asigned to another project the rest of the week, but will try your suggestions on monday when I’m back on that project.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 15, 2018, 9:17am UTC](https://discourse.aurelia.io/t/files-bind-issue/1887/6 "2018-11-15T09:17:14Z")

</div>

Sure. Update here when you have a chance 😃