Accessing input in the upload template

[Anish]

I've used the kendo-upload control with the custom template to add a comment input for each file uploaded.

 

This was based on sample Kendo-upload in

stackblitz https://stackblitz.com/edit/angular-gmuolt?file=app/upload.component.ts

---

<label [for]="myUpload">Some upload label text</label>
    <kendo-upload
      #myUpload="kendoUpload"
      [autoUpload]="false"
      [saveUrl]="uploadSaveUrl"
      [removeUrl]="uploadRemoveUrl">
      <ng-template kendoUploadFileTemplate let-files let-state="state">

          <div>Name: {{files[0].name}} Size: {{files[0].size}} bytes</div>
          <input />
          <button *ngIf="showButton(state)"
              (click)="remove(myUpload, files[0].uid)"
              class="k-button" style="position: absolute; right: .2em;">
              Remove
          </button>
      </ng-template>
    </kendo-upload>

-------

 

What would be the best way to access the value of the input controls for each file item?

I've tried using a dynamically generated ID for the input, but for my case this control is inside a tabstrip and if the user clicks on the submit when the focus is on another tab, the values cannot be retrieved.

[Dimiter Topalov]

Hi Joy,

The developer could use all built-in Angular mechanics for binding and accessing the HTML Input element's value in the respective component code, and also from within the Upload template's markup.

For example the Input could be marked as a template reference variable (e.g. ... <input #myInput .../>), and then passed around in event handlers and/or accessed otherwise in the template.

The Input can also be bound via ngModel or its DOM API input event can be handled in code, for example:

https://stackblitz.com/edit/angular-gmuolt-eazszj?file=app/upload.component.ts

The upload and remove event handlers will be then able to access the values stored in the component via the ngModel binding to add the additional data to the request as described in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/uploads/upload/credentials/#toc-attaching-additional-data-to-requests

When multiple selected files need to be catered for, there are a couple of suitable approaches:

1) Create a custom data-input-uid or similar attribute on the select, bound to the respective file's uid (available in the template let-files="files" - files[0].uid will be the respective uid). Then in the "select", "upload" or "remove" event handlers, access the respective DOM elements with query selectors by this attribute:

https://stackblitz.com/edit/angular-gmuolt-qagckq?file=app/upload.component.ts

2) Create a custom form control in a form group for each input with an unique name retrieved from the file's uid, and value - the respective input element's value, for example:

https://stackblitz.com/edit/angular-gmuolt-jxzifm?file=app/upload.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik