Search code examples
htmljquerykendo-uikendo-ui-angular2kendo-upload

How do i add fontawesome icon to Kendo UI upload button

I want to add font awesome icon to Kendo UI Upload Button

HTML Code :

<div class="row row-border lopUploadSet">
        <div class="col-md-4 col-sm-12">
            <input type="hidden" name="DocFileType" id="DocFileType1" value="14" />
            <div class="lopUploadLabel">
                <span>1</span>
                Driver's License
            </div>
        </div>
         <div class="col-md-5 col-sm-12 lopUploadInput"><input type="file" name="files" id="files1" class="clsfiles" />
         
         </div>
         <div class="col-md-3 col-sm-12">
            <a href="#" id="notes-toggle" class="lopUploadAddNotes"><i class="bi bi-chat-left-quote"></i> Add Notes</a>
        </div>
        <div class="col-12 form-group notes-view" id="notes-box">
                <textarea class="form-control" placeholder="Add Notes" id="Note1" name="Note" rows="3"></textarea>
        </div>
    </div>

Generated Code :

<div class="col-md-5 col-sm-12 lopUploadInput"><div class="k-widget k-upload k-upload-async k-upload-empty"><div class="k-dropzone"><div class="k-button k-upload-button" aria-label="Select files"><input type="file" name="files" id="files1" class="clsfiles" data-role="upload" multiple="multiple" autocomplete="off"><span>Select files</span></div><em class="k-dropzone-hint">Drop files here to upload</em></div></div>
         
         </div>

enter image description here

Solution

  • As your questions says - How do i add fontawesome icon to Kendo UI upload button. First, add the font awesome CSS <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />. Second, put <i class="fab fa-accusoft"></i> between your button tags. Now your upload button has a font awesome icon. Try the code below in the Telerik Dojo.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default-v2.min.css"/>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>
</head>
<body>
  
<style>
  .k-clear-selected,
  .k-upload-selected {
    display: none !important;
  }
</style>

<input name="files" id="files" type="file" />
<button id="uploadAll" class="k-button"><i class="fab fa-accusoft"></i>Start upload</button>
<script>

  $(document).ready(function() {
    $("#files").kendoUpload({
      async: {
        autoUpload: false,
        saveUrl: "http://my-app.localhost/save",
        removeUrl: "http://my-app.localhost/remove"
      }
    });

    $("#uploadAll").on('click', function(e){
      e.preventDefault();

      var upload = $("#files").data("kendoUpload");
      upload.upload();
    })
  });
</script>
</body>
</html>