I'm trying to allow a user to both upload a document and utilize the HTML input type="color". Then click Save and have both saved to the record. The color as a field on the record, the file as an attachment.

To do this I'm using an apex:actionfunction to first get the value of the input field since VF doesn't support the color type. This part works fine.

However, you can't do re-renders with apex:inputFile tags so I'm not sure how to also get the uploaded file as well. Right now the body comes through as null.

If I use a standard commandButton I can get the file body but then I have no way to pull the value of the color input. I considered the new File API but the lack of IE9 support is kinda a dealbreaker. Any suggestions?


// on document load
    $(document).ready(function() {  
        $('#saveExit').click(function(e) {

            console.log('here' + $('#bgColorChoice').val());


<apex:actionRegion >
    <apex:actionFunction name="saveAndExitAF" action="{!saveAndExit}" rerender="test">
         <apex:param id="color" name="color" value="" /> 

Color picker and file upload:

<div id="colorPicker">
        Select a background color for the form: 
        <input type="color" id="bgColorChoice" value="{!thisForm.color__c}"/>
        Upload a Logo for the form:
        <apex:inputFile value="{!logo.body}" filename="{!logo.name}" id="uploadLogo" accept="image/*"/>
        Current Logo:<br/>
        <apex:outputLink rendered="{!IF( logo.Id!=null,true,false)}" value="{!URLFOR($Action.Attachment.Download, logo.Id)}" target="_blank">

Controller method:

/* update form color and logo and redirect back to form *********************************************************/
public pageReference saveAndExit () {   

    // update logo image

    //save form updates (color)
    update thisForm;

    PageReference pageRef = new PageReference('/'+urlFormId);
    return pageRef;
/* if a logo image has been uploaded upsert it **********************************************************/
    public void updateLogoAttachment() {
        if (logo!=null && logo.body!=null)
            upsert logo;

1 Answer 1


I figured out a solution. It now works as follow:

1) User Clicks Save - > javascript gets value of color input and calls actionFunction to save form update (new color).

2) OnComplete of the actionFunction it calls .click() on a hidden apex:commandButton, the action of the apex:commandButton updates the uploaded file and redirects the user.

Hope that helps if anyone else runs into this issue!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .