Edit this page

Upload Files by Clicking Custom Buttons

Environment

Product Progress Kendo UI Upload
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" onclick="uploadSelected()"  />
    <script>
        $("#files").kendoUpload({
            async: {
                saveUrl: "http://my-app.localhost/save",
                removeUrl: "http://my-app.localhost/remove",
                autoUpload: false
            }
        });

        function uploadSelected() {
          $(".k-upload-selected").click();
        }
    </script>
    <style>  
      .k-clear-selected, .k-upload-selected {
        display: none !important;
      }
    </style>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy