Prerequisites:

• You should already have FormsViewer installed and understand how to upload and open forms.
• You should already have an XSN form template that includes a Picture Control or File Attachment Control. If you are not familiar with Picture Controls, please see our How To: Capture Camera Images
• Your form template should already be injected with qRules.

Steps:

1. In SharePoint locate or create document library that you would like to use for storing images or files from your form.

   

2. Open your form in InfoPath Design mode.
3. In the Fields pane, locate the base64Binary field from which you would like to save out files to SharePoint.

   

4. Add a qRulesLink attribute to the field:
   1. Right-click the field
   2. Click Add…
   3. Enter the name qRulesLink (use this exact spelling and capitalization)
   4. Click OK
5. Repeat step 4, but with the name qRulesFilename instead of qRulesLink.

   

   Note: Your data source may or may not be repeating depending on your needs. In this example, we are allowing users to attach more than one photo in the form so we’re showing a repeating group.

6. Make sure that the Rules taskpane is open.
7. Add a formatting rule to hide the control when the file has been saved out:
   1. Locate the Picture or File Attachment Control that is bound to your field and click it.
   2. In the Rules pane, click New à Formatting
   3. Give the rule the name “Hide when file saved”
   4. Under Condition: click the blue None text.
   5. Using the condition builder:
      1. Use the left dropdown to select the qRulesLink
      2. Use the middle dropdown to select is not blank.
      3. Click OK
   6. Check the Hide this control box.

      

8. Add a section control and hyperlink for the link to the file:
   1. Use your mouse to drag your picture or attachment field from the Fields pane to a location right next to your Picture or Attachment control.
   2. When prompted for a control type, click Section.
   3. Click to place your cursor inside the newly created Section Control.
   4. Select the Insert tab and click Hyperlink.

      

   5. When prompted for the hyperlink’s properties:
      1. For Link to, select the qRulesLink
      2. For Display, select the qRulesFilename

         

   6. Click OK.
   7. Click and drag the right edge of the Hyperlink so it fills most of its container.
   8. If you wish to display a thumbnail of the linked image aside from the link itself, drag the qRulesLink field inside the section as a Picture control – right-click on the field on the Fields taskpane, select More and then select Picture

      

   9. Set the control as read-only and also adjust the qRulesLink photo control with a fixed width or height of your choice so that it appears like a thumbnail on your form.

      

9. Add a formatting rule to hide the section control when the file has not been saved out:
   1. Repeat the sub-steps from step 7, with these differences:
   2. Instead of clicking the Picture or File attachment, click the Section control you created in step 8-b.
   3. Instead of selecting is not blank in the condition builder, select is blank.

      

10. Add a button to your view and give it meaningful text like “Upload Photo”
11. Add a rule to the button to save out the image:
    1. Click the button.
    2. In the Rules taskpane, click New à Action
    3. Click Add à Set a field’s value
    4. In the Set a field’s value dialog:
       1. For the Field, select the Command field in the QdabraRules secondary data source.
       2. For the Value, paste the following command text, and replace the highlighted parts as indicated: SaveToSharePoint /url=[full URL to SharePoint library, up to the library’s name] /xpath=[full XPath to your picture or file field]

          

       3. Click OK
12. Save the template and upload it to FormsViewer.
13. Open the form in FormsViewer, add a file to your Picture or File Attachment Control.
14. Click the button to upload the file.

    

15. If it worked correctly, you should see the Picture or File Attachment Control disappear and it should be replaced with a thumbnail and a link to the saved out file. Clicking the link should take you to the uploaded image into the SharePoint library, showing full resolution.

    

    

Notes:

• If you are saving out pictures, replace the hyperlink with a Picture control that is bound to the qRulesLink This control should display the picture by loading it from its location in the library.
• Try the above steps on a picture or attachment field in a repeating group/repeating section. The SaveToSharePoint command should work without any additional changes.
• Add the rule from your Save Files button to your form’s Submit button. Place this rule before the rule that actually submits the form. This should cause files to save out before your form is saved, reducing the size of your documents and the speed of your submits.