Programatically display k-warning icon

2 posts, 0 answers
  1. AppsWiz
    AppsWiz avatar
    15 posts
    Member since:
    Apr 2013

    Posted 03 Dec 2015 Link to this post

    Hi

    I'm using the async uploader, and I'm executing this function on the 'upload' event of the Kendo UI Upload widget. The function validates the file size for a single file. I'm displaying a custom div to present the error message when the file size exceeds the specified limit, and I want to also display the k-warning icon, but at the point when I execute the function, no DOM element has been added for the k-upload-status. Is my only option to manually create an element with a class of .k-warning? It feels like the right way to do this is to somehow trigger the k-upload-status - can I do that?

     

                        function onUpload(e) {

                            $("#logoUploadErrorMessage").hide();
                            $(".k-icon.k-warning").hide();

                            var files = e.files;

                            if (files[0].size > 4 * 1024 * 1024) {
                                $(".k-icon.k-warning").show();
                                $("#logoUploadErrorMessage").text("Max logo size 4mb");
                                $("#logoUploadErrorMessage").show();
                                e.preventDefault(); // This cancels the upload for the file
                            }
                        }

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 04 Dec 2015 Link to this post

    Hello AppsWiz,

    Indeed the DOM element is not existing initially before a file is uploaded. The only applicable approach would be to manually append it.
    E.g.

    $(".k-upload .k-dropzone").append('<strong class="k-upload-status k-upload-status-total">Done<span class="k-icon k-warning"></span></strong>');

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top