1.7 KiB
| title | description | type | page_title | slug | tags | res_type | category |
|---|---|---|---|---|---|---|---|
| Add confirmation Dialog when removing a file inside the Upload's list. | A project that shows how you can add a confirmation Dialog when removing an uploaded file. | how-to | Learn how to add a confirmation Dialog when removing an uploaded file in the Upload component. | upload-add-confirmation-dialog-on-remove | upload, list, remove file, confirmation, dialog, custom, template, kendovue, native | kb | knowledge-base |
Environment
| Product Version | 3.10.0 |
| Product | Progress® Kendo UI for Vue Native Upload |
Description
This Knowledge base(KB) article demonstrates how we can add a confirmation Dialog when removing a file inside the list of the Upload component.
KB sections
Solution description
To achieve the demonstrated behavior, we need to use the [list]({% slug api_upload_uploadprops %}#toc-list) prop of the Upload component and pass a custom template to it. You can find more details about the usage of the list property on our [Upload customization demo]({% slug rendering_upload %}).
Runnable example
To test the following example, select files for Upload and click on one of the "X" buttons inside the Upload's list.
{% meta id:index height:480 %} {% embed_file upload-add-confirmation-dialog-on-remove/main.vue preview %} {% embed_file upload-add-confirmation-dialog-on-remove/CustomList.vue %} {% embed_file upload-add-confirmation-dialog-on-remove/main.js %} {% endmeta %}