How to upload a file within a CRM Add form
Blackbaud CRM supports uploading binary files through custom forms built with the Infinity SDK. Whether it's an image, excel sheet, word document, or any other binary contents, you can accept it in your customization. File uploads are one of those features that isn't really hard to implement, but it's not well documented. Looking at Blackbaud-authored specs is one option, but often the file upload logic is mixed up with dozens of other features that make it hard to decipher what's really going on.
In this article, we'll walk through what it takes to support file uploads in a custom add form.
Table Spec
The first thing you'll need to know is that the SDK is going to want to associate your file with a file name. That comes into play right away as we modify our table spec.
You'd probably expect to need a binary field for the data itself, but it's not as obvious that you'll need a file name field.
Here is an example pair of fields for your table spec:
<BinaryField Name="TESTIMAGE" Required="true" Description="Image file for users to see"/>
<TextField Name="TESTIMAGEFILENAME" Length="500" Required="true" Description="File name of the image"/>
Add form
Add the two fields to your add form, and link them together with the little-known <File> attribute:
<FormField FieldID="TESTIMAGE" Caption="Test image" DataType="Binary">
<File FileNameFieldID="TESTIMAGEFILENAME"/>
</FormField>
<FormField FieldID="TESTIMAGEFILENAME" Caption="Test image file" Required="true" MaxLength="500" Multiline="false" DataType="String"/>
Make sure to load your spec before moving on to the next step.
UIModel
Create a UIModel for your add form (or, if you already have one, use Tools>Refresh UIModel to update it).
You won't need to touch the VB file. But you will need to make the following changes to the HTML file:
1) Add the following CSS block to the very top, above everything else:
<style type="text/css">
.filename-input {
background: transparent !important;
border: none !important;
outline: none !important;
padding: 0px 0px 0px 0px !important;
}
</style>
2) Change the file name field as shown in these before-and-after snippets
Before:
<textarea id="#MAP#TESTIMAGEFILENAME_value" rows="3" cols="1"></textarea>
After:
<input id="#MAP#TESTIMAGEFILENAME_value" type="text" class="filename-input"/>
3) Finally, load your spec, deploy the HTML and DLL, and you should have a good looking file upload field:
Next up: how to edit the image after it has been uploaded
Questions? Comments? Please reach out at contact@styonssoftware.com, or via any of the methods on our Contact page.