Uploading Files from Button on Add Form

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.

Comments

  • 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

  • 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
  • Do you have any instruction on retrieving the file from the database using a datalist or listbuilder?

Categories