Clear/Reset Upload List

[Keith]

I am struggling with clearing/resetting the upload control to remove the list of items in our component.  In general, the question is what is the best way to clear or reset the upload list?

I have the declaration:

<kendo-upload #theUpload id="theAttachments"
     [saveUrl]="<saveUrl>"
     [autoUpload]="false"
     (select)="attachmentsSelectEventHandler($event)"
     (remove)="attachmentsRemoveEventHandler($event)"
     (clear)="attachmentsClearEventHandler($event)">
</kendo-upload>

 

I execute the upload manually through the uploadfiles method after related data is saved from the form.  Then after it is done, I clear all other form elements and want to clear the associated list of attachments. I cannot find a programmatic approach through the API to clear. 

I appreciate your time as always.

Peace,
Keith

[Dimiter Madjarov]

Hello Keith,

The Upload component supports two way binding to a list of files using the [(ngModel)] directive:

https://www.telerik.com/kendo-angular-ui/components/upload/model-binding/

There is no need to call an API method in order to clear the files list, but only set the files collection to an empty array. This will be reflected in the component.

this.myFiles = [];

Regards,
Dimiter Madjarov
Progress Telerik

[Keith]

The challenge is that I'm not binding to ngmodel yet because I might be doing a delete or cancel.  So therefore there has not been a success as discussed here:

The [(ngModel)] value gets updated only after the success event is fired, that is, when files are successfully uploaded or removed. To access all selected files and their details, use the event data in the select, upload, or success event handlers. The event.files field provides the array of file details.

[Dimiter Madjarov]

Hi Keith,


Thank you for the update. In this case I would suggest to programatically trigger the click of the 'Clear' button of the Upload component. You could retrieve it by it's 'k-clear-selected' CSS class.

Regards,
Dimiter Madjarov
Progress Telerik

[Simon]

So we have to use jquery to update an angular component!

Wow, that sucks!

[Myles]

An example would be nice.

[Dimiter Madjarov]

Hi Myles,


Could you specify the exact scenario in the current case, so I could provide an example about it?

Regards,
Dimiter Madjarov
Progress Telerik