Remove files from a Kendo UI Upload programatically

[Ruby Jean]

Hi Guys,

Is there a quick way to remove files from a Kendo UI Upload plus fire the corresponding remove request on the server? I have a Kendo UI Form where I added the Kendo Upload. When the user clicks the Clear button in the form, the files are removed from the list however the remove request is not fired thus, the uploaded files are still in the server. 

This is the code snippet on how I have added the kendo upload to the kendo form:

$('<input type="file" name="' + options.field + '" id="' + options.field + '"/>').appendTo(container)
                .kendoUpload({
                    multiple: false,
                    async: {
                        saveUrl: "/api/upload/save",
                        removeUrl: "/api/upload/remove"
                    },
                    validation: {
                        allowedExtensions: [".jpg", ".gif"]
                    },
                    upload: (e: kendo.ui.UploadUploadEvent) => {
                        e.data = { uploadId: this._uploadId };
                    },
                    remove: (e: kendo.ui.UploadRemoveEvent) => {
                        e.data = { uploadId: this._uploadId };
                    },
                    success: (e: kendo.ui.UploadSuccessEvent) => {
                        this.enableSubmit(e.operation === 'upload');
                    }
                })

I have tried using the removeAllFiles() or removeFile() but doesn't seem to do any request calls.

Hoping to hear from you soon.

Kindest regards, Ruby.

 

[Martin]

Hello, Ruby,

I have answered the question in the support thread on the same topic, but I will copy my reply here as well for convenience:

Using the removeAllFiles method in the clear event results in an error on the browser console, probably because the Upload is looking for files in the list that are no longer present (cleared). I would suggest trying the click event of the Clear button:

$(".k-form-clear").click(function(){
        	upload.removeAllFiles();
        })

Here is a small example to try it out, you can see the remove request in the Network tab.

Regards,
Martin
Progress Telerik