How can I swap out the "choose file" button on my form?

  • Profile Image
    photoculture
    Asked on September 30, 2011 at 02:50 PM

    I was able to easily swap out the "SUBMIT" button, but in form editing, when I select the Upload Image category, there's no option at the top to modify the button image. Help, please. 

  • Profile Image
    JotFormHelper
    Answered on September 30, 2011 at 06:51 PM

    Although Im Training For JotForm I Would Like To Know THis Too!

  • Profile Image
    JotFormHelper
    Answered on September 30, 2011 at 06:52 PM

    Good Question!

    JotForm Will Help You Soon!

    Thank You For Using JotForm

     (Im just a forum helper!) 

     -Y H

     

     

  • Profile Image
    JotFormHelper
    Answered on September 30, 2011 at 07:46 PM

    Hi,

    The file upload button text is inherent to a browser and cannot be changed. Chrome and Safari are both WebKit-based browsers, and for the most part act very similarly, that is why they display the same text for the upload button.

    What you can do is configure your file upload field to accept multiple files, so that the button changes to an orange one, with "Upload a File" as text that is uniform across all browsers.

    Just in case you're wondering, the "Upload a File" text cannot be modified.

    We hope you find this useful. Let us know if you have other questions or issues that need attention.


    This Text Was Found And Made By JotForm Support On:

    https://www.jotform.com/answers/41832-File-Upload-browse-button-changes-to-choose-file

    ___________________________________________________________________________

    Thank You For Using JotForm

    (Im just a forum helper!) 

    -Y H

  • Profile Image
    abajan
    Answered on September 30, 2011 at 10:16 PM

    Hi photoculture

    Just for the record, the text on multi-upload buttons can be changed but the process is a rather tedious one.

    It may also interest you to know that a request was submitted some weeks ago to have the text on multi-upload buttons changed from "Upload a file" to "Upload Files".

    Thanks for the help, Yasin.


    ~ Wayne



  • Profile Image
    estyle
    Answered on November 30, 2011 at 07:56 AM

    Can we edit the orange style of the button?  Custom CSS?

  • Profile Image
    abajan
    Answered on November 30, 2011 at 10:14 AM

    Yes, the color of multi-upload buttons can be changed to your liking, as outlined by my colleague NeilVicente in this thread. Moreover, editing the button's text is now a much simpler task, thanks to emrew86 who is one of our developers. Please see his post in this thread.

  • Profile Image
    abajan
    Answered on November 30, 2011 at 12:15 PM

    Oops! I only just discovered, after testing Neil's solution in my browsers (Firefox 8, IE 8, Safari 5, Chrome 15 and Opera 11, all on Windows) that his soltution works only in Firefox! That's because extra declarations required to override those in JotForm's main form stylesheet are missing.

    I'll see if I can re-write the CSS that should be injected to work in all (or at least most) browsers and post it here later.

  • Profile Image
    abajan
    Answered on November 30, 2011 at 06:23 PM

    The following CSS works in all of the browsers mentioned above however neither IE 8 nor Opera 11 render the gradient effect. Moreover, rounded corners are not be displayed in IE 8 but that's another topic.

    .qq-upload-button {
    background: #03C;
    background: -moz-linear-gradient(top, #06C 0%, #003 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#06C), color-stop(100%,#003));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06C', endColorstr='#003',GradientType=0 );
    text-shadow: 0 -1px #003;
    border: 1px solid #003;
    }

    .qq-upload-button-hover {
    background: #039;
    background: -moz-linear-gradient(top, #003 0%, #06C 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003), color-stop(100%,#06C));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003', endColorstr='#06C',GradientType=0 );
    }

    Of course, if you're good at blending colors, feel free to change the values to suit.