How to clear selected files on file upload control after a successful upload?

[Nathan]

I am using asynchronous file upload, where the user cannot select multiple files. Once the upload has completed successfully, I want to remove the selected file from the display. How can I do this?

I tried 
 $(".k-upload-files").remove() 

it removed the value from the display, but if the user selected another file and tried to upload again, then it would actually post the old file, not the newly selected file.

I also tried
$("#attachments").parents(".t-upload").find(".t-upload-files").remove() 

but it did not work

[Brian]

I've been trying to get this to work as well, and would love to know a solution when someone gets it to work.

[Iliana Dyankova]

Hello guys,

To achieve this you could hook up to the success event of the Kendo UI Upload and then remove the all <li> elements. For example: 

$("#files").kendoUpload({
  //...
  success: function () {
     $(".k-upload-files.k-reset").find("li").remove();
  }
});

I hope this helps.
 
Greetings,
Iliana Nikolova
the Telerik team

[Eric]

Hi Iliana,

Good idea with the OnSuccess handler, but when I do this with multiple file selection enabled it actually has side effects where only the first selected file gets uploaded, the others do not complete for some reason.  When I remove the provided success handler code the multi-file upload works fine.  Not sure if it's causing the cancel event to get fired or something else.

What did work for me was something similar:
1) Handled the "Complete" event instead of the "Success" event.  Complete appears to only be fired once at the end of all uploads.
2) Used the following slightly different selector to remove the entire UL instead of just the items because just removing the LI tags left an empty border in place.

    function onComplete() {
        $(".k-widget.k-upload").find("ul").remove();
    }   

This would be a great feature to have built into the control.

Thanks for the original guidance as it got me in the right direction.
Eric

[Iliana Dyankova]

Hello Eric,

The implementation of such functionality is not in our immediate plans, however we may consider it for future releases. If you wish, you can create an entry at our UserVoice page - the community interest in the idea will influence on our decision towards implementing it.
 
Greetings,
Iliana Nikolova
the Telerik team

[Kris Nobels]

I use this

$(".k-upload-files.k-reset").find("li").parent().remove();

[Neal]

Hi - This problem has been driving me absolutely crazy, but I have a workaround to the problem of the control posting the previously selected file on subsequent post backs.  What seems to be happening when you clear the previously selected files and the user selects a new file is BOTH are being sent to the server.   To deal with this, I see if there are multiple files in the HttpPostedFileBase, and if so, I just use the last one.

Obviously, this workaround presents a few problems

1. . Unnecessary data is being posted to the server
2.  It will not work if you are looking to take advantage of the multi-image upload functionality. 

Here is what I did on my  controller.  I hope someone benefits from this.

        public JsonResult UploadImage(string catalogItemId, string action, IEnumerable<HttpPostedFileBase> imageFiles)
        {
            var files = imageFiles.ToList();
            HttpPostedFileBase correctFile;
            if ( files.Count() > 1 )
            {
                correctFile = files.LastOrDefault();
            }
            else
            {
                correctFile = files.FirstOrDefault();
            }
  // etc

[Dimiter Madjarov]

Hi Neal,


I was unable to reproduce the issue with the previous files being send again on my side. Could you please provide additional details about the scenario, in which this is reproducing and the Kendo UI version, being used?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

[MarkS]

I am seeing the same problem that Neal described. The upload control is sending previous files along with the most recent selected one. This happens when I use a form submit for the non-async file upload on a page that has other ajax handled controls. I want to stay on the same page after the file upload - I show and hide the file upload control via a button click.

I think the issue is related to defining the upload form tag using a target="hiddenIframe". I do this so I can stay on the same page and get a json result from the server after the file is uploaded. 

I use this code: http://www.telerik.com/forums/reset-upload#wdqTkHeSn0WBvhHftPbwPg  to clear the file control UI after uploading a file, and that is working, but it still uploads previous files on subsequent uploads when using an iframe as the target of the form submit. I'm using kendo version 2015.1.408.

-Mark 

 

 

[Dimiter Madjarov]

Hello Mark,

The current topic is related to the async version of the Upload widget. The synchronous one does not preserve files on page reload and basically does not differ from a regular <input type"file" /> element.

Regards,
Dimiter Madjarov
Telerik

 

 

[MarkS]

Hi Dimiter,

I created a simplified snippet that shows the problem here: http://dojo.telerik.com/eTeJE 

I submit the form using javascript. If you upload a file, then another and so on, you'll get multiple files uploading to the server. There's no page refresh to reset the control, and it is leaving the generated hidden input in the dom after the file upload. So for the next upload, it generates another hidden input and sends two files.

The fix is to remove the hidden input (as part of the 'reset' code) before doing the next upload:

$("[data-role='upload']").filter(function() { return $(this).css("display") == "none" }).remove();

 It would be nice to have a reset() method on the upload control that would return it to it's initial state.

-Mark

 

 

[Dimiter Madjarov]

Hello MarkS,

The current approach for resetting the Upload widget state only refreshes it visually. The actual input elements containing the files are still present in the form. They are inside the k-upload-button div element. You should remove them too in order to no submit the files multiple times.

Regards,
Dimiter Madjarov
Telerik

 

 

[Larenzo]

Close all the elements using the close button with javascript:

 

$(".k-upload-action.k-button.k-button-bare").trigger("click");​

[Dimiter Madjarov]

Hello Larenzo,

This is correct. Similar approach would be something like:

$("span.k-delete").each(function(){
   $(this).closest("button").click();
});

Regards,
Dimiter Madjarov
Telerik

 

 

[Orlando]

Hello Dimiter,

After reading your post, we realize that in fact inside the div element k-upload button, there are as many input type=file as files we selected in the previous upload, plus the original input type=file that were converted to a kendoUpload control. So, the solution to delete the undesired previous files after upload completes is to remove them and preserve the original input type=file (with id="files") using this code:

$(".k-upload-button > input[type='file'][id!='files']").remove()

Hope this works for any who has the same behavior and thanks for the hint!!

[Michael]

This does the trick for me - putting a div arround the UploadControl and renew the whole thing

function uploadImage() {
    $("#MyUploadWrapper").html('<input name="ImageUploadImages" id="ImageUploadImages" type="file" accept="png, tiff, tif, jpg"/>');
    $("#ImageUploadImages").kendoUpload(<any>{
        async: {
            saveUrl: "Services/FileUpload.ashx",
            autoUpload: true,
            chunkSize: 2000
        },
        upload: (e) => {
            e.data = { parentFolderId: currentFolderId };
        },
        error: (response) => { alert(response.XMLHttpRequest.response); },
        success: fileUploaded,
        showFileList: false,
        multiple: false
    });

 
    $("#ImageUploadImages").closest(".k-upload").find("span").text("Bild hinzufügen");
    $("#ImageUpload").data("kendoWindow").center();
    $("#ImageUpload").data("kendoWindow").open();
}