input type color and upload file

Question

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?

Javascript:

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

            saveAndExitAF($('#bgColorChoice').val());
            console.log('here' + $('#bgColorChoice').val());
            e.preventDefault();
        });
    });

ActionFunction:

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

Color picker and file upload:

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

Controller method:

/* update form color and logo and redirect back to form *********************************************************/
public pageReference saveAndExit () {   
    system.debug('color'+Apexpages.currentPage().getParameters().get('color'));
    thisForm.color__c=Apexpages.currentPage().getParameters().get('color'); 

    // update logo image
    updateLogoAttachment();

    //save form updates (color)
    update thisForm;

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

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!