Making file upload buttons and submit buttons look OK

[CM]

With iOS 6 we now have the ability to upload photos via Safari (win!). But, when using standard form and input elements for uploading, the buttons appear too small and formatting breaks:

<div id="image-form" data-init="initForm">

    <form action="/home/uploadimage" method="post" enctype="multipart/form-data">

        <label for="file">Filename:</label>

        <input type="file" name="file" id="file" />

 

        <input type="submit" name="submit" value="Submit" />

    </form>

</div>

Something like the above produces something ugly. See attached.

Do I need to edit my own CSS for this or is there a better way?

Thanks!

[Stefan]

Hi Christopher,

the solution is to set the file-input with style=display:none to hide it from the user.
Then you may add a button with a click event that launches the click-event of the file input.

It looks like

<form>
<input type="file" id="file" style="display:none" />
<div data-role="button" data-click="selFile">Select</div>
</form>

<script>
function selForm(){
  $("#file").click();
}
</script>

unluckily, after the Q3-Release i got the problem that an input of type file does not react at once. You have to click it multiple times.
Outside the kendo-app it works fine.  Can anybody confirm this strange behaviour?

[Petyo]

Hello Stoyan,

You may try the provided solution with our latest internal build - it addresses various issues related to click events. 

Christopher, you may consider requesting a built-in styling for file uploads in our UserVoice tracker.

All the best,
Petyo
the Telerik team

[Akshay]

Having similar issue faced by Stoyan of multiple clicks for file-input tag.
Can some one please provide solution for this ?

[Alexander Valchev]

Hello guys,

The original Kendo UI Q3 release had some issues with the touch/mouse events due to the major change we did in event handling in order to support systems with both mouse and touch (Chrome/FF on Windows 8).

I am glad to inform you that these issues are fixed in the Service Pack release (2012.3.1315). Please download the latter release and upgrade your project.

For convenience I prepared a small example based on Stoyan's solution which uses the latest KendoUI version. I hope this will help.

Regards,
Alexander Valchev
the Telerik team