File Upload Properties

I am new and trying to use File Upload Feature in skuid model to attach an image to the record.

In the file upload properties, there is an option to select File storage location. If i select, in a field on the record option. What type of field do I need to create on the record to hold the file?

And how to display the file that was uploaded when viewing or editing the record?

Thanks for helping.

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