locked
Larger FileUpload.GetHtml text box RRS feed

  • Question

  • User1463147114 posted

    I am using Webmartix and the FileUpload.GetHtml helper.

    I would like the text box much bigger so the user can visually verify the name of the file to upload before submitting it.

    I cannot find anything that shows how to do this.

    Any help would be greatly appreciated.

    thx.

    Saturday, June 29, 2013 5:05 PM

Answers

  • User1713851783 posted

    Add a style for the input fields of file type in your CSS file.

    Something like

                input[type="file"]{
                    width: 500px;
                }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 29, 2013 5:42 PM
  • User1713851783 posted

    I'm not sure what the input field would be called here for me to reference it in CSS?

    If you want to see what id and class the FileUpload helper has assigned to the input field, just look at the source of the page (any browser has this option).

    Any way, it is an input field of file type and this is what the style I suggested points at.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 30, 2013 5:12 PM
  • User-821857111 posted

    File upload controls vary dramatically from browser to browser. A lot of them don't even feature boxes anymore. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 1, 2013 12:29 AM
  • User281315223 posted

    You'll need to ensure that the markup that you are using is correct (as your current syntax contains a few errors such as incorrect closing tags and missing closing quotes) which have been amended below : 

    <div id="file-upload-0" class="file-upload">
         <div>
            <input type="file" name="fileUpload" />
         </div>
    </div>

    and if you wanted to only target the "file" inputs that were within a <div> element with the class "file-upload", you could specifically use the following CSS rule to handle that (similar to GmGregori's suggestion) : 

    .file-upload input[type="file"]{
       width: 500px; /* Adjust to fit your needs */
    }

    Example

    Mike presents an excellent point regarding the inconsistancy present among most browsers and how they handle file input elements, which are notoriously difficult to style. (Keep this in mind when considering your options or goals regarding this)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 1, 2013 1:44 AM

All replies

  • User1713851783 posted

    Add a style for the input fields of file type in your CSS file.

    Something like

                input[type="file"]{
                    width: 500px;
                }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 29, 2013 5:42 PM
  • User1463147114 posted

    Hi Gregori.

    Just to make sure we're on the same track, this is what the FileUpload.GetHtml helper looks like:

    I'm not sure what the input field would be called here for me to reference it in CSS?

    FileUpload.GetHtml(
                initialNumberOfFiles:1,
                allowMoreFilesToBeAdded:false,
                includeFormTag:false) 
    Sunday, June 30, 2013 12:49 PM
  • User-821857111 posted

    You should add what GmGregori posted into your CSS file.

    Sunday, June 30, 2013 3:01 PM
  • User1713851783 posted

    I'm not sure what the input field would be called here for me to reference it in CSS?

    If you want to see what id and class the FileUpload helper has assigned to the input field, just look at the source of the page (any browser has this option).

    Any way, it is an input field of file type and this is what the style I suggested points at.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 30, 2013 5:12 PM
  • User1463147114 posted

    This is the source code for the FileUpload helper:

    <div id="file-upload-0" class="file-upload>
    <div >
    <input type="file" name="fileUpload" ><input>
    </div>

    Setting the fileUpload width: 300px seems to set the entire input line to 300px, not the input box which contains the file name.

    Sunday, June 30, 2013 7:27 PM
  • User-821857111 posted

    File upload controls vary dramatically from browser to browser. A lot of them don't even feature boxes anymore. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 1, 2013 12:29 AM
  • User281315223 posted

    You'll need to ensure that the markup that you are using is correct (as your current syntax contains a few errors such as incorrect closing tags and missing closing quotes) which have been amended below : 

    <div id="file-upload-0" class="file-upload">
         <div>
            <input type="file" name="fileUpload" />
         </div>
    </div>

    and if you wanted to only target the "file" inputs that were within a <div> element with the class "file-upload", you could specifically use the following CSS rule to handle that (similar to GmGregori's suggestion) : 

    .file-upload input[type="file"]{
       width: 500px; /* Adjust to fit your needs */
    }

    Example

    Mike presents an excellent point regarding the inconsistancy present among most browsers and how they handle file input elements, which are notoriously difficult to style. (Keep this in mind when considering your options or goals regarding this)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 1, 2013 1:44 AM
  • User1463147114 posted

    First, thanks to GmGregori, Mike and Rion for the support & advice.

    As Mike mentioned there certainly is an inconsistancy among browsers.

    Chrome seems to handle it the best with no feature box, I like this approach.

    The CSS style to set the width has no impact in Firefox or a couple of versions of IE that I tried, however if I get rid of the FileUpload.GetHtml helper and just use html with a "size=100px" it works great in Firefox but not some IE.

    And who knows what will happen with new versions? Hopefully they will go the way that Chrome has adopted.

    Thx again for all the help.

    P.S. Rion - my apologies for not correcting my typos. I was in a hurry when I typed the syntax in the post and only paid attention to the quoted names.

    Monday, July 1, 2013 1:40 PM
  • User281315223 posted

    No worries jw7965.

    I was just making sure that you hadn't actually pasted your actual code and that it contained those typos :) Glad that you got all of this figure out.

    Monday, July 1, 2013 1:59 PM