Done/success bar persisting for Upload beyond window close/reopen

[Adam]

I'm using Kendo UI (in IE9 on server, local dev in IE11, using async but not drag and drop) to upload PDF specification sheets for products in an order. The PDFs are displayed in a Kendo Grid, with an icon on each row displaying their status. Sometimes a document may go missing or become out of date, so the user can click on the status icon to open up a Kendo window on top of the grid that allows them to upload a file to replace the missing/out of date reference. Therefore, it is likely that they will upload one, close the window, move to another row, and upload another (and so on). Only single file upload is supported for this reason.

On the first window open event, everything works fine. The file is uploaded, stored appropriately, and the "done" bar pops up (underneath the button, which may or may not be a UX problem -- see attached image). However, when the window is closed and then reopened, the success/done bar persists, even if the user hasn't uploaded a second file yet. This remains no matter where you travel in the website, unless your entire session ends and restarts.

Things I've tried:
--destroying the window that the upload DOM is in
--destroying the upload DOMremoving the upload DOM (can't get it to come back though)
--emptying the files from the upload DOM
--removing the CSS class associated with the list of successful file uploads
--destroying every CSS class associated with the uploader onSuccess (for the upload) and onClose (for the window)

I think what would work would be to create a new "instance" of the uploader every time the window opens, but I'm not sure how to do that.

The JS code for the window/uploader is very primitive:

001.var DocAdd = function () {
002.
003.    openAddDocumentWindow = function () {
004.
005.        var w = $("#addWindow");
006.        var f = $("#files");
007.
008.        kendo.ui.Upload.fn._supportsDrop = function () { return false; } //prevents Done bar from getting bigger and bigger each time the window opens...why is that? Only happens in IE11
009.
010.          f = $("#files").kendoUpload({
011.                //options
012.                async: {
013.                    saveUrl: "EditSubmittal.aspx",
014.                    autoUpload: true
015.                },
016.                error: addControllerOnUploadError,
017.                upload: addControllerOnUpload,
018.                multiple: false,
019.                showFileList: false,
020.            });
021.
022.        //constructs window
023.        w = $("#addWindow").kendoWindow({
024.            title: "Add Document",
025.            pinned: true,
026.            draggable: false,
027.            resizable: false,
028.            actions: [
029.                "Close"
030.            ],
031.            modal: true,
032.            close: onClose,
033.            open: function (e) {
034.                var refHeight = $(window).innerHeight();
035.                this.setOptions({
036.                    width: 500,
037.                    height: 250
038.                });
039.            },
040.        });
041.
042.        w.data("kendoWindow").open().center();
043.
044.    }; //end function openEditDocumentWindow
045.
046.    //=========================================================================================================================
047.    // Function addControllerOnUpload
048.    //
049.    // This function will contain the main logic for the file upload process.
050.    //=========================================================================================================================
051.    function addControllerOnUpload(e) {
052.
053.        if (e.files[0].extension !== ".pdf") {
054.            e.preventDefault();
055.
056.            //also validate size if possible
057.            addControllerOnUploadError(e);
058.        }
059.        else {
060.            //get access to the files here.
061.           //future dev, get JSON data. Codebehind handles upload logic.
062.        }
063.    }
064.    //=========================================================================================================================
065.    // Function addControllerOnUploadError
066.    //
067.    // This function will run if the file upload is a failure.
068.    //=========================================================================================================================
069.    function addControllerOnUploadError(e) {
070.
071.        var msg = "Document upload failed. Make sure that your file is a .pdf document and try again.";
072.
073.        kendo.ui.ExtAlertDialog.show({
074.            title: SUB_GEN_MSG_TITLE,
075.            icon: "k-ext-information",
076.            message: msg,
077.            width: "600px",
078.            height: "100px",
079.            attributes: {
080.                "align": "center"
081.            },
082.        });
083.    }
084.
085.    //=========================================================================================================================
086.    // Function onClose
087.    //
088.    // This function is a test to get rid of persisting upload data
089.    //=========================================================================================================================
090.    function onClose() {
091.
092.        //SOME OF THE STUFF I'VE TRIED TO GET RID OF DONE/SUCCESS BAR ON REOPEN
093.
094.        //kendo.destroy("#files");
095.        //kendo.destroy("#addWindow");
096.        //$(".k-upload-files").empty();
097.        //$(".k-widget k-upload k-header").kendo.destroy();
098.
099.        // Destroy widget and detach events
100.        //$("#files").data("kendoUpload").destroy();
101.
102.        // Remove widget element from DOM
103.        //$("#files").closest(".k-upload").remove();
104.        //$(".k-file .k-file-success").find("li").remove();
105.    }
106.
107.    return {
108.        openAddDocumentWindow: openAddDocumentWindow
109.    };
110.}();

The markup for creating the window and the uploader is also very basic (sorry about the <br><br> eyesore and inline styling...will be changed):

01.<div id="addWindow" style="display:none;height:100%; ">
02.            <div id="addWindowTopPane" style="overflow:hidden;">
03.                <div id="addWindowMain" style="overflow:hidden;">
04.                   <form method="post" action="/kendo-ui/upload/submit">
05.                        <div style="text-align:center; margin-top: 65px;">
06.                            <label id="allowedFileTypeMsg">Allowed file types are: .pdf </label>
07.                            </br></br>
08.                            <input id="files" name="files" type="file"/>
09.                        </div>
10.                    </form>
11.
12.                </div>
13.            </div>
14.</div>

In review, questions/problems:

1) How do I get a "fresh" instance of the uploader with no success/done rows on each window open event?
2) Why does this success/done row show up behind my "Select Files" button?

Attachments:

FirstTimeOpeningBeforeUpload.png:  Shows the upload window when it is first clicked in the session. This is what it should look like every time the window opens.

EveryOtherTimeWindowIsOpenedAfterFirstUpload.png: Self explanatory. Also shows the done row behind the button...why is that?

ExampleDOMExplorerF12.png: Shows the markup dynamically created at runtime for the uploader, in case destroying DOM elements by class is the way to go.

[Dimiter Madjarov]

Hello Adam,


Thank you for the detailed explanation. Indeed at the moment there is no method in the Upload widget API which will reset it to initial state, so I would suggest to destroy it and recreate the widget again in the Window open event handler. You could even create it there in first place.
E.g.
I have the following window content on my side

<div id="upload-wrapper">
    <input id="files" name="files" type="file"/>
</div>

and the following open event handler

function onOpen(e) {
    var input = this.wrapper.find("#files");

    if (input.data("kendoUpload")) {
        var upload = input.data("kendoUpload");
        upload.destroy();
        $("#upload-wrapper").empty();
        input = $('<input id="files" name="files" type="file"/>').appendTo($("#upload-wrapper"));
    }

    input.kendoUpload();
}

The Success/Done status is shown by design when a file is uploaded. You could check our demos to assure this.

Regards,
Dimiter Madjarov
Telerik

 

 

[Adam]

Great! I haven't dug into the database yet, but from a visual standpoint, it appears to be working. I will add (for anyone who might read this post later), that I had to add my upload configurations inside of the parentheses for your line that dynamically instantiates the upload widget each time the window opens. This allowed me to remove my code from the top of my file.

input.kendoUpload(
//include configurations here or all settings will be default values!
);

One last question, will single file upload is enabled (which prevents the users from using CTRL+C or SHIFT+C to select more than one file in the file chooser window), the user can still upload a file, and then click "Select Files..." and upload another, and so on. My row in the grid (and database) only can hold one record, so having the user attempt to upload more than one time is not preferred. Can I attach a window.close call to my upload widget's success event?

[Dimiter Madjarov]

Hello Adam,


Yes, the Upload configuration should be added too. I just removed it for convenience.

Regarding the second question, yes this is a valid scenario.
E.g.

input.kendoUpload({
    ...
    success: function (e) {
        this.wrapper.closest("[data-role='window']").data("kendoWindow").close();
    }
});

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik