Search code examples
htmlcssvisualforceapex

Add custom apex:inputFile icon/image

I'm using an inputFile button to upload some files...

The button renders on my page as a grey 'Choose File To Upload' button. Can I add my own custom icon/image in place of the button?

Solution

  • Yes you can do that. Although, it is not a straight forward solution.

    The solution is to :

    1. create a custom input text element with the standard button styling
    2. overlay that element on top of the "choose file" button
    3. write javascript code to handle the click on the custom element
    4. trigger the click() of standard "choose file" when custom element is clicked.

    You may find the solution described in detail with code on my blog post --> https://sfdc-gyaan.rhcloud.com/2014/05/renamingoverriding-choose-filebrowse-button-in-salesforce/

    I hope this helps. Let me know if you face any issues implementing it.