How to change the text in the file upload field?

  • colmos
    Asked on October 19, 2016 at 9:52 AM
    One last thing regarding this. I have a file upload on my form. The button (Choose File) and placeholder text (no file selected) aren't on the warnings list. Is there another place I could change this? 
  • Kevin Support Team Lead
    Replied on October 19, 2016 at 9:58 AM

    The text shown in the File Upload field cannot be changed through the form settings, the text is shown and translated automatically in the field itself, this is something by default in the <input type="field"/> HTML tag and the text can only be translated based on the user's browser settings. 

    However, with some custom CSS code you may hide the default button and show a customized one, please inject this code to your form that will help you to change the field layout and text shown in it: 

      .form-all .form-upload::-webkit-file-upload-button {

          visibility: hidden;

    font-size: 0px;

        }

        .form-all .form-upload::before {

    visibility: visible;

            content: 'Choose File';

            background: #d9b866 none repeat scroll 0 0;

            border: 1px solid #ccc;

            border-radius: 6px;

            box-shadow: none;

            color: #fff;

            font-family: "Josefin Sans",sans-serif;

            font-size: 16px;

            font-weight: normal;

            padding: 9px 15px;

            text-shadow: none;

        }

    Do note that you may change the background color as well as the text in "Content" property. 

    This guide will help you to inject the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    However, the text cannot also be translated, it will show a fixed text and it will not change with the browser's language settings either. 

    However, you may also hide completely the file upload button and use the label as button, this can be translated from the form settings and then you may style the label to show as a button as well.

    The only change would be to apply this code to the label instead of the upload button:

    labelID {

    visibility: visible;

     

            content: 'Choose File';

     

            background: #d9b866 none repeat scroll 0 0;

     

            border: 1px solid #ccc;

     

            border-radius: 6px;

     

            box-shadow: none;

     

            color: #fff;

     

            font-family: "Josefin Sans",sans-serif;

     

            font-size: 16px;

     

            font-weight: normal;

     

            padding: 9px 15px;

     

            text-shadow: none;

     

        }

    Please if you have any question, let us know.