Kendo-angular: Upload - Initial files not working

[ChrisProlls]

I'm implementing the Kendo Upload component for Angular 2, and I need to show some initial files after that the component was loaded, so I used [(ngModel)] for this, but it seems not working. When I push my files into the array binded to the component, they are not showing. Here is a plunker : http://plnkr.co/edit/zlpFXIyIcBNiRtV1I89L

Any ideas ?

[Raisolution]

Hi @ChrisProlls,

the reason for the observed behavior is that no change detection is triggered when pushing items to the array (it's reference is still the same). You could achieve this by setting new value to the array.

click(){
    this.myFiles =[{ name: "First.txt", size: 500 },
                   { name: "First.jpg", size: 500 }];
}

Could you elaborate what is the use case for this scenario? Would you for example add more items to the array on a later stage? I am asking because we are considering to push an enhancement for similar cases.

[ChrisProlls]

My scenario is :

• I have an Angular form (with an upload component) that's filled with an API call
• File infos are retrieved after all components are loaded
  That's why I wanted to push file infos into my already-initialized array, but your solution works perfectly too.
  Maybe the scenario of pushing files into the array will be if we retrieve multiple files from several API asynchronously at the same time. But I imagine we can achieve this with your solution too.

[Raisolution]

Thanks for the feedback.

We are considering exactly the scenario, where the array should be modified multiple times. Our concern is that the user may have selected actual files in between, so the current state of the array would be

  [ { name: "First.txt", size: 500 },
    { name: "First.jpg", size: 500 },
    { name: "Newly selected file", size: 1000, rawFile: <actual file data>}]

If at this moment the developer adds new items to the array (triggering change detection), we will consider all files in the array as _initial_ i.e. the Upload will not store the raw file data, which was previously present and it will be wiped out. Would you consider this behavior as expected from the developers point of view?

[ChrisProlls]

Can't you keep rawFile and any other info stored into the object ? I explain myself.
In our scenario we have autoUpload = true, and when the user select a new file we create a temporary file on the server. The path to this temporary file is returned to the client and store into the FileInfo object. We have extended your FileInfo object like this :

export class UploadFileInfo implements FileInfo {
    serverName?: string;
    name: string;
    size: number;
    extension?: string;
}

The property serverName introduced here is only for us for finding the temporary file on the server when the user finally submit the form. So in our case, if we initialize the page with 2 files, and the user select a new file, rawData is not important but serverName is. This information cannot be lost : we lost the path to temporary file on the server. I imagine maybe other developers will need rawData for further processes (file preview, Stream manipulation ...)

[PeterStaev]

+1 for supporting custom properties in initial files. For newly upload files currently you can add your custom properties in the success event and they are working fine. But any property other than the ones in FileInfo is ignored for the initial files you set on the widget.

[Raisolution]

Hi guys,

we have implemented the requested features:

• Custom properties could be set for initial files
• The rawFile data will be kept
• The initial files could be set multiple times, which will clear the previously selected ones

The Upload component would still provide only successfully uploaded files as value for ngModel.