This is a migrated thread and some comments may be shown as answers.
Clear/Reset Upload List
5 Answers 208 Views
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 18 Jun 2018, 09:40 PM

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

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 19 Jun 2018, 06:20 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Keith
Top achievements
Rank 1
answered on 19 Jun 2018, 01:04 PM

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.
0
Dimiter Madjarov
Telerik team
answered on 19 Jun 2018, 01:23 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Myles
Top achievements
Rank 1
answered on 30 Jul 2019, 03:02 PM
An example would be nice.
0
Dimiter Madjarov
Telerik team
answered on 31 Jul 2019, 07:30 AM
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
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Keith
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Keith
Top achievements
Rank 1
Myles
Top achievements
Rank 1
Share this question
or