rendering of initial files in upload component

[josh]

Hi,

there is this link how to do the above mentioned task:

https://www.telerik.com/kendo-angular-ui/components/uploads/upload/model-binding/#toc-rendering-of-initial-files

In my special case the file isn't rendered.

I have a multistep form with a stepper, where I pass the form variable as input variable to the appr. step screen. The workflow is the following: the user fills in some data on the first screen, then selects a file on the second screen, reviews it on the 3rd screen and if everything is ok, uploads it on the last screen.

This is the code detail of the form:

<form class="k-form" [formGroup]="form" style="margin-top: 2rem">
    <entity
      *ngIf="currentStep === 0"
      [entity]="currentGroup"
      [formPassed]="entityFormPassed"
    >
    </entity>
    <file *ngIf="currentStep === 1" [file]="currentGroup"> </file>
    <overview *ngIf="currentStep === 2" [form]="form"></overview>
    <upload-file *ngIf="currentStep === 3" [form]="form"></upload-file>
  </form>

The form variable contains the file, which I would like to upload as a last step.

My upload-file component looks like this:

<kendo-upload [ngModel]="fileArray"> </kendo-upload>

TS:

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FileInfo } from '@progress/kendo-angular-upload';

@Component({
  selector: 'upload-file',
  templateUrl: './upload-file.component.html',
})
export class UploadFileComponent implements OnInit {
  @Input() form!: FormGroup;

  fileArray!: FileInfo[];

  ngOnInit() {
    this.fileArray = <FileInfo[]>this.form.get('file.fileName')?.value;
  }
}

I get the file correctly, it has the appr. value. But the file isn't rendered in the file list of the upload component. If I directly declare the fileArray variable with some test files, it works. The question is, how to get rendered the file, which was provided via input property?

I have another question too.

In your examples to the upload component you use a mock service to simulate the upload process and this changes the progressbar value too.

In my case - as described above - the user will start the upload. Do I need to care about changing the progress bar value somehow via the uploadprogress event or the component cares itself about it? If no, how can I do this?

Thanks for your help.