Programmatically remove/clear uploaded files

[Luke]

Hello,

I have a synchronized Upload widget in a form with some other inputs. The form has a cancel button and an apply button, both of which start out disabled, and become enabled when a change is made to one or more of the inputs. Pressing the cancel button on the form resets all the input values back to default.

I would like this to include clearing any file currently loaded in the Upload widget. However, I do not see how this can be accomplished using the client-side API or events shown in the demos. Is there a way to programmatically (from javascript, for example) remove/clear loaded files?

Thank you,
Luke

[Luke]

Disregard this question, I found that the upload control seems to integrate itself automatically into the form's reset functionality. Beautiful :)

[Sanjay]

Hi Luke,

Glad that you found a solution to your problem. But could you specify how exactly is the workflow, since I too have a similar case where I have a separate button to delete an uploaded file which does get deleted as well, but I couldn't get Upload extension cleared of the filename and progress bar.

Here is the code to get the file deleted
function btnRemove_click() {
        $.ajax({
            url: "/Ctrl/RemoveImage",
            type: "POST",
            success: function (data) {
                $('#lblMethodError').hide();
                $("#pnlUploadedImage").hide();
                //code to reset the Upload control ???
            },
            error: function (xhr, status, error) {
                // Show the error
                $('#lblMethodError').text(xhr.responseText);
                $('#lblMethodError').show();
            }
        });
    }
I dont think that we could reset the control in the controller action method 'RemoveImage', so i guess it has to be through javascript or may be through some clever modification to the css.
Hope you or someone might be able to get a solution to this problem.

[Robin]

Hi,

I had the same problem but solved it.

If you know you only allow one file you can write this:

function ResetUpload() {
    $("span.t-delete").click();
}

Even if you have set the ShowFileList-property to false, the filelist will render but isn't visible. My idea was to fake a click on the "Remove"-button and it works fine for me.

[Travis]

I want to clear the file list after the "oncomplete" or "onupload" event.  I tried using

 

$(

 

"span.t-delete").click();

 

but it doesn't work for me.

[Travis]

Ah, I think I have it:

 

$("[class^='t-upload-files t-reset']").remove();

[Charley]

The best way is to delete the ul itself.  The download method will automatically recreate the ul for you.  It works perfectly.  I will post the JQuery in a few minutes.

[Charley]

As promised but a day later sorry got distracted.  The only issues is that if you have more than one download element on the page this will kill all the lists for ever one.  There is probably a way to get the parents id and make sure you are delete the correct one but that is for version two.

function onComplete()
    {
        setTimeout('$("ul.t-upload-files").remove();', 1300);
    }