Making file upload buttons and submit buttons look OK

5 posts, 0 answers
  1. CM
    CM avatar
    12 posts
    Member since:
    Nov 2012

    Posted 08 Nov 2012 Link to this post

    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!

  2. Stefan
    Stefan avatar
    4 posts
    Member since:
    Jul 2012

    Posted 20 Nov 2012 Link to this post

    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?
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 21 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Akshay
    Akshay avatar
    7 posts
    Member since:
    Jan 2013

    Posted 18 Jan 2013 Link to this post

    Having similar issue faced by Stoyan of multiple clicks for file-input tag.
    Can some one please provide solution for this ?
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready