styling a upload box

[David Price]

Hello,

I don't seem to be able to style the upload to look like a normal button

                                                

 

I want it to look like a bootstrap button

But I can't update the size it's turning out like this

Also, how can I put a + before the text?

2. If I put an upload box inside a repeater and a text box next to it. after the file has uploaded how can I update the specific row inside a repeater, with the file name?

[Keerthana Rajendran]

Hi David,   

   

Thank you for contacting Syncfusion Support.   

   

Query 1: I don't seem to be able to style the upload to look like a normal button. how can I put a + before the text?   

   

   

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.     

   

   <div class="posupload">   

               

                <ej:Button ID="button1" ClientSideOnClick="onbtnclick" Type="Button" ContentType="TextAndImage" Height="40px"Width="100px" PrefixIcon="e-icon e-plus" Text="Browse" runat="server"></ej:Button>   

                <br />   

                    <ej:UploadBox ID="Upload1" SaveUrl="saveFiles.ashx" RemoveUrl="removeFiles.ashx" Height="0px" Width="0px"ClientSideOnSuccess="onSuccess"  AsyncUpload="true" MultipleFilesSelection="true" runat="server"></ej:UploadBox>   

</div>   

        </div>   

    </div>   

    <script>   

        function onbtnclick(args) {   

            $("#<%=Upload1.ClientID%>").find(".e-uploadinput").trigger("click");    

                

        }   

           

    </script>   

                

   

      

Query  2: If I put an upload box inside a repeater and a text box next to it. after the file has uploaded how can I update the specific row inside a repeater, with the file name?   

   

   

You can get the file name in success event of Uploadbox and you can display this name wherever required based on your scenario. Please refer to the below code.   

   

   <div class="posupload">   

               

                <ej:Button ID="button1" ClientSideOnClick="onbtnclick" Type="Button" ContentType="TextAndImage" Height="40px"Width="100px" PrefixIcon="e-icon e-plus" Text="Browse" runat="server"></ej:Button>   

                <br />   

                    <ej:UploadBox ID="Upload1" SaveUrl="saveFiles.ashx" RemoveUrl="removeFiles.ashx" Height="0px" Width="0px"ClientSideOnSuccess="onSuccess"  AsyncUpload="true" MultipleFilesSelection="true" runat="server"></ej:UploadBox>   

</div>   

            <div id="filedetails" style="padding:30px">   

   

            </div>   

        </div>   

    </div>   

    <script>   

        function onbtnclick(args) {   

            $("#<%=Upload1.ClientID%>").find(".e-uploadinput").trigger("click");    

                

        }   

        function onSuccess(args) {   

             var name = args.files.name;    

                var size = args.files.size;    

                $("#filedetails").append('<tr class="details"><td><div class=" e-icon e-checkmark"></div>'+'<td class="name">' + "Name:" + name +'</td>' +'<td>' + "Size:" + size +'</td></tr>');    

        }   

    </script>   

                

   

We have attached a sample for your reference which can be downloaded from the below link   

   

http://www.syncfusion.com/downloads/support/forum/138412/ze/Upload-1985532195   

   

Regards,   

Keerthana.