Upload Files by Clicking Custom Buttons

Environment

Product	Progress® Kendo UI® Upload for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I hide the default Upload button and upload the selected file by clicking on a custom button?

Solution

1. Hide the default Clear and Upload buttons of the Upload by using CSS.
2. Allow the trigger of the upload by clicking the default button by using jQuery in the click handler of the custom button.
   

    <input type="file" name="files" id="files"/>
    <input type="button" value="Upload Selected Files" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-button" onclick="uploadSelected()"  />
    <script>
        $("#files").kendoUpload({
            async: {
                saveUrl: "https://demos.telerik.com/kendo-ui/upload/save",
                removeUrl: "https://demos.telerik.com/kendo-ui/upload/save",
                autoUpload: false
            }
        });

        function uploadSelected() {
          $(".k-upload-selected").click();
        }
    </script>
    <style>  
      .k-clear-selected, .k-upload-selected {
        display: none !important;
      }
    </style>