Hi Fireveo,

This option is actually an older option, and it requires a custom Lookup field on your Salesforce object that looks to the file object. There’s some information about it here, and elsewhere in the Documentation: https://docs.skuid.com/latest/en/skuid/components/image/#the-image-source-property

But since this option was created, Salesforce added the Content Document feature, which allows a many-to-many relationship between records(or entities) and files (including images). So, I would recommend getting familiar with Content Documents instead, if you’re able. 

To understand how you might use Skuid with the Content Document feature, please take a look at this recent Community conversation:
https://community.skuid.com/t/in-content-document

How do you set Lookup field on my Salesforce object that looks to the file object?

Fireveo,

I am not exactly sure of your use case, but you can try this page in your org. It uses the Contact object along with ContentDocumentLink to store images/files linked to the Contact. I am using the Contact Description field to store the LastPublishedVersionId of the last file I uploaded. This is displayed using the Image component. There is also a row action in the Files tab to ‘set’ that row’s file as the current image for the Contact.

I would recommend that you add a custom Text field to store the Id instead of the Contact Description field. I only used the Contact Description field to make this page portable.

Thanks,

Bill

<skuidpage showheader="true" personalizationmode="server" showsidebar="true" tabtooverride="Contact">

    <models>

        <model id="Contact" datasource="salesforce" createrowifnonefound="false" query="true" sobject="Contact" limit="1">

            <fields>

                <field id="FirstName"/>

                <field id="LastName"/>

                <field id="CreatedDate"/>

                <field id="MailingCity"/>

                <field id="MailingStreet"/>

                <field id="MailingState"/>

                <field id="MailingCountry"/>

                <field id="MailingPostalCode"/>

                <field id="LastModifiedDate"/>

                <field id="Phone"/>

                <field id="Email"/>

                <field id="Id"/>

                <field id="AccountId"/>

                <field id="Account.Name"/>

                <field id="Birthdate"/>

                <field id="Description"/>

            </fields>

            <conditions>

                <condition type="param" value="id" enclosevalueinquotes="true" field="Id" operator="="/>

            </conditions>

            <actions/>

        </model>

        <model id="ContentDocumentLink" datasource="salesforce" createrowifnonefound="false" query="true" sobject="ContentDocumentLink" limit="20">

            <fields>

                <field id="ContentDocumentId"/>

                <field id="ContentDocument.Title"/>

                <field id="LinkedEntityId"/>

                <field id="LinkedEntity.Name"/>

                <field id="ContentDocument.LatestPublishedVersionId"/>

                <field id="ContentDocument.LatestPublishedVersion.Title"/>

                <field id="Id"/>

                <field id="ContentDocument.Id"/>

                <field id="ContentDocument.LatestPublishedVersion.Id"/>

            </fields>

            <conditions>

                <condition type="modelmerge" value="" model="Contact" enclosevalueinquotes="true" field="LinkedEntityId" operator="=" mergefield="Id" novaluebehavior="noquery" fieldtargetobjects="Contact"/>

            </conditions>

            <actions/>

        </model>

        <model id="LastUploaded" datasource="salesforce" createrowifnonefound="false" query="false" sobject="ContentDocumentLink" limit="1" orderby="SystemModstamp DESC">

            <fields>

                <field id="ContentDocumentId"/>

                <field id="ContentDocument.Title"/>

                <field id="LinkedEntityId"/>

                <field id="LinkedEntity.Name"/>

                <field id="ContentDocument.LatestPublishedVersionId"/>

                <field id="ContentDocument.LatestPublishedVersion.Title"/>

                <field id="Id"/>

                <field id="ContentDocument.Id"/>

                <field id="SystemModstamp"/>

            </fields>

            <conditions>

                <condition type="modelmerge" value="" model="Contact" enclosevalueinquotes="true" field="LinkedEntityId" operator="=" mergefield="Id" novaluebehavior="noquery" fieldtargetobjects="Contact"/>

            </conditions>

            <actions/>

        </model>

        <model id="Selected" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">

            <fields>

                <field id="CurrentIndex" displaytype="DOUBLE" label="CurrentIndex" length="3" defaultvaluetype="fieldvalue" ogdisplaytype="TEXT" precision="3" scale="0"/>

            </fields>

            <conditions/>

            <actions/>

        </model>

    </models>

    <components>

        <pagetitle uniqueid="sk-2nnOO--83" model="Contact">

            <maintitle>

                <template>{{FirstName}} {{LastName}}</template>

            </maintitle>

            <subtitle>

                <template>{{Model.label}}</template>

            </subtitle>

            <actions>

                <action type="savecancel" uniqueid="sk-zZmyt-88" window="self">

                    <models>

                        <model>ContentDocumentLink</model>

                    </models>

                    <savehotkeys>

                        <hotkey key="s" modifiers="ctrl"/>

                    </savehotkeys>

                </action>

            </actions>

        </pagetitle>

        <tabset uniqueid="sk-2nnZAZ-122" renderas="" defertabrendering="true" rememberlastusertab="true">

            <tabs>

                <tab name="Demographics">

                    <components>

                        <grid uniqueid="sk-1JOn4K-289">

                            <divisions>

                                <division verticalalign="top" behavior="specified" width="250px">

                                    <components>

                                        <image source="url" uniqueid="sk-2om0aY-1786" datasource="salesforce" behavior="button" model="Contact" url="/sfc/servlet.shepherd/version/download/{{{Description}}}" alt="Click to select another image">

                                            <styles>

                                                <styleitem type="itemsize" width="auto" height="auto"/>

                                                <styleitem type="border"/>

                                            </styles>

                                            <interactions>

                                                <interaction type="tap">

                                                    <action type="requeryModel" model="ContentDocumentLink" behavior="standard"/>

                                                    <action type="showPopup">

                                                        <popup title="Select Image" width="70%">

                                                            <components>

                                                                <deck searchmethod="server" searchbox="false" columngutter=".75em" rowgutter=".75em" model="ContentDocumentLink" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="150px" uniqueid="sk-2oqyo7-658" buttonposition="" pagesize="5" emptysearchbehavior="query">

                                                                    <components>

                                                                        <wrapper uniqueid="sk-2or6aG-702">

                                                                            <components>

                                                                                <image source="url" uniqueid="sk-2or1Bk-683" datasource="salesforce" behavior="none" model="ContentDocumentLink" url="/sfc/servlet.shepherd/version/download/{{{ContentDocument.LatestPublishedVersionId}}}">

                                                                                    <styles>

                                                                                        <styleitem type="itemsize" width="custom">

                                                                                            <styles>

                                                                                                <styleitem property="width" value="350px"/>

                                                                                            </styles>

                                                                                        </styleitem>

                                                                                        <styleitem type="border"/>

                                                                                    </styles>

                                                                                    <conditions>

                                                                                        <condition type="contextrow" field="Id" mergefield="Id"/>

                                                                                    </conditions>

                                                                                </image>

                                                                            </components>

                                                                            <styles>

                                                                                <styleitem type="background"/>

                                                                                <styleitem type="border"/>

                                                                                <styleitem type="size" width="custom" height="collapse">

                                                                                    <styles>

                                                                                        <styleitem property="max-width" value="300px"/>

                                                                                    </styles>

                                                                                </styleitem>

                                                                            </styles>

                                                                        </wrapper>

                                                                    </components>

                                                                    <massactions/>

                                                                    <interactions>

                                                                        <interaction type="tap" direction="either">

                                                                            <action type="updateRow" fieldmodel="Contact" affectedrows="context" field="Description" enclosevalueinquotes="true" value="{{ContentDocument.LatestPublishedVersionId}}">

                                                                                <models/>

                                                                                <popup title="{{Model.label}}: {{Name}}" width="80%">

                                                                                    <components/>

                                                                                </popup>

                                                                            </action>

                                                                            <action type="save" rollbackonanyerror="true">

                                                                                <models>

                                                                                    <model>Contact</model>

                                                                                </models>

                                                                                <onerroractions>

                                                                                    <action type="blockUI" message="There was an error" timeout="3000"/>

                                                                                    <action type="unblockUI" message="There was an error" timeout="3000"/>

                                                                                </onerroractions>

                                                                            </action>

                                                                            <action type="closeTopmostPopup"/>

                                                                        </interaction>

                                                                    </interactions>

                                                                    <actions/>

                                                                    <styles>

                                                                        <styleitem type="border"/>

                                                                    </styles>

                                                                    <searchfields/>

                                                                </deck>

                                                            </components>

                                                        </popup>

                                                    </action>

                                                </interaction>

                                            </interactions>

                                        </image>

                                        <file storeas="contentdocumentwithrecord" displayas="filename" uniqueid="sk-2oxn1B-383" datasource="salesforce" model="Contact" label="New Contact Image">

                                            <uploadsuccessactions>

                                                <action type="requeryModel" model="LastUploaded" behavior="standard"/>

                                                <action type="updateRow" fieldmodel="Contact" affectedrows="context" field="Description" enclosevalueinquotes="true" value="{{{$Model.LastUploaded.data.0.ContentDocument.LatestPublishedVersionId}}}"/>

        &nb