how to give icon with text in upload button

[Raj Kumar]

i want upload button like this. icon in the left and text in right. How ca i do like this in upload button

[Raj Kumar]

Is there no one to give reply?

[Keerthana Rajendran]

Hi Raj Kumar,    

   

Thanks for contacting Syncfusion Support.   

   

We suggest you to use normal ejButton with prefixIcon property to add icon to the left and text to the right. You can hide the default Upload button with height and width set to “0px” and perform Upload action on ejButton click by triggering click manually on upload input. Please refer to the below given code.  

   

<button id="upload">Upload</button>   

  <div id="UploadDefault"></div>   

   

   

<script type="text/javascript">   

        $(function () {   

            // declaration   

            $("#UploadDefault").ejUploadbox({   

                saveUrl: "http://js.syncfusion.com/demos/web/uploadbox/saveFiles.ashx",   

                removeUrl: "http://js.syncfusion.com/demos/web/uploadbox/removeFiles.ashx",   

                height:"0px",   

                width:"0px"   

            });   

           $("#upload").ejButton({   

                size: "large",   

                contentType: "textandimage",   

                prefixIcon: "e-icon e-upload", //add icon to the left   

                click:function(args)   

               {   

                $("#UploadDefault").find(".e-uploadinput").trigger("click");  //trigger Upload input click manually on button click   

               }   

            });   

        });   

    </script>   

   

Please refer to the below given sample   

   

http://jsplayground.syncfusion.com/ivhjpeat   

   

Please refer to the below given UG and KB links for more details   

   

https://help.syncfusion.com/js/button/icons   

   

https://www.syncfusion.com/kb/8458/how-to-perform-file-upload-without-using-browse-button   

   

Regards,   

Keerthana.   

 

[Raj Kumar]

Thanks a lot. 

[Keerthana Rajendran]

Hi Raj Kumar, 

 

Most Welcome. Please get back to us if you require further assistance on this. We will be happy to assist you. 

 

Regards, 

Keerthana.