Uploading Files from Button on Add Form

Lynne Barton

Is there documentation anywhere about how to add files from a button on an add form much like the Add Attachment on the Constituent Documentation tab? I would like to be able to have that functionality on an Add form that I am creating.

Joseph Styons

Hi Lynne!

This is a great question. Adding a file upload feature isn't difficult, but as you point out, it's not documented on the Blackbaud site.

I created an article with instructions on how to do it, which you can find here.

The short-short version is:

1) Add two fields to your form:

<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"/>

2) Create a UIModel (or refresh it, if you already have one)

3) Modify the HTML file by adding this CSS to the very top:

 <style type="text/css">
  .filename-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0px 0px 0px 0px !important;
  }
</style> 

and also by changing the image file name field to look like this:

 <input id="#MAP#TESTIMAGEFILENAME_value" type="text" class="filename-input"/> 

I hope this helps!


-J.R. Styons

https://www.styonssoftware.com

Joseph Styons

Hi again Lynne,

I just wanted to mention that I also created a help article on using file uploads within an edit form.
You can find that article here.

Have a great day!

-J.R. Styons

https://www.styonssoftware.com

Jean Pascal Remy

Do you have any instruction on retrieving the file from the database using a datalist or listbuilder?

Ernest Noa