Allow a visitor to upload an image as part of a Form submission

In the Forms app, you are able to allow or require the visitor to upload one or more images as part of a Form submission. These images will be saved locally to Soapbox with a reference to their location saved to a field you specify in Salesforce on the record created at form submission.

To allow or require a visitor to upload an image:

1. Open the Forms page for which you wish a user to upload an image or images
2. Click the Form tab
3. Click Add Image
4. For Name, enter a value to be displayed only in the administrator
5. For Label, enter a value to display to the end user as the label for this form element
6. For Salesforce Field, select a text field in Salesforce to which the relative location and name of the image file will be saved (e.g., "/storage/images/img_5321434.jpg")
7. For Published, choose Yes or No
8. For Required, choose Yes or No. If you select Yes, you may also choose to make this requirement conditional on a controlling checkbox field on the Form. See here for more details.
9. For Enable Edit, choose Yes or No. If you select No, this element will not be included on the Form when it is used to edit existing records. It will only appear when the Form is used to create new records.
10. For Max File Size, enter a value in MB for the largest image file size that will be permitted
11. For Max Thumbnail Width, set the maximum width in pixels of the image when displayed in edit view. If both height and width are defined, the image will be rendered to match the larger of the two with the proportion remaining consistent.
12. For Max Thumbnail Height, set the maximum height in pixels of the image when displayed in edit view. If both height and width are defined, the image will be rendered to match the larger of the two with the proportion remaining consistent.
13. For Max Image Width, set the maximum width in pixels that will be used to resize the image on upload, if it is larger than the maximum. If both height and width are defined, the image will be resized to match the larger of the two with the proportion remaining consistent.
14. For Max Image Height, set the maximum height in pixels that will be used to resize the image on upload, if it is larger than the maximum. If both height and width are defined, the image will be resized to match the larger of the two with the proportion remaining consistent.
15. For File Types, enter a comma delimited list of file type extensions permitted to be uploaded (e.g., jpg, gif, png)
16. Add Images Folder defines the location in the storage directory of your Soapbox site where uploaded images are saved. You may change this to any valid subdirectory under /storage.
17. For File Name, if this Form is only accessible to logged in users and you wish to override the standard naming convention used by Soapbox which replaces the uploaded file name with "img_" followed by a random number, you may define the file formatting you wish to use here.
    
    When defining the file name, you may use {$Account.FieldName} or {$Contact.FieldName} to merge in field values from the Account or Contact object of the logged in user as well as any combination of letters, numbers, hyphens, or underscores as static values. For instance “{$Account.Id}-1234” would display the Account Id value, a hyphen, and the number 1234.
    
    If you define the File Name, it will cause any existing file saved to Soapbox to be replace if the logged in user uploads a new file when editing the associated record.
18. Click Save in the modal popup
19. Click Save

If you wish to allow a visitor to upload multiple images as part of a Form submission, you may create multiple Add Image elements.

Common Use Case

For organizations using the Forms app to allow users to create or edit records in Salesforce which are then displayed in Soapbox using the Directories app, the Add Image element is used to allow users to provide an image file or files that will be displayed in that Directory view. This is often used by organizations who wish logged in users to provide an avatar for themselves or a logo for a company or organization that is then displayed in a Directory.