aurelia-ui-toolkits / aurelia-kendoui-bridge

MIT License
117 stars 31 forks source link

ak-upload bind selected files into viewmodel #780

Closed enrico-padovani closed 6 years ago

enrico-padovani commented 6 years ago

Hi,

I'm doing something like this:

<ak-upload k-multiple.bind="true" 
           k-async.bind="{ autoUpload: false }">
    <input name="files" type="file" files.bind="files" />
</ak-upload>

In the viewmodel I have the files property which is populated correctly only the first time. If I change the selected files, it will not be synchronized. It seems that's the files.bind="files" fires one time.

Should this be working?

JeroenVinke commented 6 years ago

I'm not sure how Kendo handles changes to files internally. I'd recommend using the API functions to do file operations

enrico-padovani commented 6 years ago

I'm closing this since It's not a bridge fault. When adding files kendo keep adding input elements, so this is probably causing aurelia binding not working as expected.

The only way I managed to make it work, is to use kendo events and keep track of files manually like so:

<ak-upload k-multiple.bind="true"
           k-async.bind="{ autoUpload: false }"
           k-on-remove.delegate="removeFiles($event.detail)"
           k-on-select.delegate="addFiles($event.detail)">
     <input name="files" type="file" />
</ak-upload>

public addFiles(e) {
    for (const file of e.files) {
        this.files.push(file.rawFile);
    }
}

public removeFiles(e) {
    for (const file of e.files) {
        this.files.splice(this.files.indexOf((file.rawFile)), 1);
    }
}

Maybe it could be done by implementing a custom attribute to avoid repeating this code over time.