Reset the UI for Infragistics IgniteUI igFileUpload

Question

I am using Infragistics IgniteUI 2014.1.

I have an igFileUpload control on the page that allows users to upload files. The control starts out as a simple "Upload File" button, but once a file is selected it changes to show progress bars, cancel buttons, etc (this behavior is built in to the control). If the user uploads x number of files, there will be x number of progress bars shown.

My problem is that I need a way to reset the UI to show the simple "Upload File" button without the progress bars after the user is finished uploading files.

Here is the relevant markup:

<div class="col-md-12">
    <div id="DIVUploadNewFile" class="form-group">
        <label class="control-label" for="FUNewFile">Upload New File</label>
        <div id="FUNewFile"></div>
    </div>
</div>

I have tried removing the DOM element that represents the igFileUpload control and then adding it back to the page and reinitializing it in the following way:

// remove the FileUpload div
$("#FUNewFile").remove();

// add the FileUpload div back to the document
$("#DIVUploadNewFile").append($("<div id='FUNewFile'></div>"));

// reinitialize the FileUpload control in exactly the same way that
// I have always done on $(document).ready()
$("#FUNewFile").igUpload({
    mode: 'multiple',
    multipleFiles: true,
    maxUploadedFiles: 5,
    autostartupload: true,
    progressUrl: "IGUploadStatusHandler.ashx",
    maxSimultaneousFilesUploads: 2,
    controlId: "serverID1"
});

When I inspect the page after running this code, the igFileUpload control is nowhere to be found.

Answer 1

You can destroy and after that re-create the widget. Removing the inner DOM will not remove the widget. You can do something like this:

if ($("#FUNewFile").data("igUpload")) {
    $("#FUNewFile").igUpload("destroy");
}
$("#FUNewFile").igUpload({
    mode: 'multiple',
    multipleFiles: true,
    maxUploadedFiles: 5,
    autostartupload: true,
    progressUrl: "IGUploadStatusHandler.ashx",
    maxSimultaneousFilesUploads: 2,
    controlId: "serverID1"
});