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;
}