File Upload Properties

  • 1
  • Question
  • Updated 1 month ago
  • Answered
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.
Photo of Fireveo

Fireveo

  • 240 Points 100 badge 2x thumb

Posted 2 months ago

  • 1
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
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/skuid/topics/in-content-document
(Edited)
Photo of Fireveo

Fireveo

  • 240 Points 100 badge 2x thumb
How do you set Lookup field on my Salesforce object that looks to the file object?
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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}}}"/>
                                                <action type="save">
                                                    <models>
                                                        <model>Contact</model>
                                                    </models>
                                                </action>
                                            </uploadsuccessactions>
                                            <uploadfailureactions/>
                                        </file>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <basicfieldeditor uniqueid="sk-2nnOO--84" model="Contact" mode="read" buttonposition="" showsavecancel="false" layout="" showheader="true">
                                            <columns>
                                                <column width="50%">
                                                    <sections>
                                                        <section title="Basics" collapsible="no">
                                                            <fields>
                                                                <field id="FirstName" type="" uniqueid="sk-zZmzM-96" valuehalign=""/>
                                                                <field id="LastName" uniqueid="sk-zZmzP-98"/>
                                                                <field id="Phone" uniqueid="sk-zaxUD-370" cssclass="" snippet="businessPhoneRender"/>
                                                                <field id="Email" type="" uniqueid="sk-13zjI1-245" valuehalign=""/>
                                                                <field id="AccountId" uniqueid="sk-1VHq5D-261" pagesize="5" optionsource="" redirecttype="datasourcedefault">
                                                                    <searchfields soslfields="All Fields" usesosl="true"/>
                                                                    <filters/>
                                                                    <renderconditions logictype="and" onhidedatabehavior="keep"/>
                                                                    <enableconditions/>
                                                                </field>
                                                                <field id="Birthdate" uniqueid="sk-22tbDe-276"/>
                                                            </fields>
                                                        </section>
                                                        <section title="Image" collapsible="no">
                                                            <fields>
                                                                <field uniqueid="sk-2ovbdg-953" id="Description"/>
                                                            </fields>
                                                        </section>
                                                    </sections>
                                                </column>
                                                <column width="50%">
                                                    <sections>
                                                        <section title="Address" collapsible="no">
                                                            <fields>
                                                                <field id="MailingStreet" uniqueid="sk-zZmzp-115"/>
                                                                <field id="MailingCity" uniqueid="sk-zZmzq-117"/>
                                                                <field id="MailingState" uniqueid="sk-zZmzr-119"/>
                                                                <field id="MailingPostalCode" uniqueid="sk-zZmzv-121"/>
                                                                <field id="MailingCountry" uniqueid="sk-zZmzz-123"/>
                                                            </fields>
                                                        </section>
                                                    </sections>
                                                </column>
                                            </columns>
                                        </basicfieldeditor>
                                    </components>
                                </division>
                            </divisions>
                            <styles>
                                <styleitem type="background" bgtype="none"/>
                            </styles>
                        </grid>
                    </components>
                </tab>
                <tab name="Files" loadlazypanels="true">
                    <components>
                        <file datasource="salesforce" uniqueid="sk-1Yfw5z-376" model="Contact" displayas="filename" storeas="contentdocumentwithrecord">
                            <uploadsuccessactions>
                                <action type="requeryModels" behavior="standard" model="ContactFeed">
                                    <models>
                                        <model>ContentDocumentLink</model>
                                    </models>
                                </action>
                            </uploadsuccessactions>
                            <uploadfailureactions/>
                            <renderconditions logictype="and"/>
                        </file>
                        <skootable uniqueid="sk-1MPZvX-293" model="ContentDocumentLink" mode="read" buttonposition="" createrecords="true" pagesize="10" showexportbuttons="false" searchbox="true" searchmethod="server" showerrorsinline="true" showsavecancel="false" showconditions="true" allowcolumnreordering="true" responsive="true" alwaysresetpagination="false">
                            <fields>
                                <field id="ContentDocumentId" uniqueid="fi-1MPhMg-312" hideable="true"/>
                                <field type="COMBO" hideable="true" uniqueid="fi-2ooSE_-1827" allowhtml="true">
                                    <label>View</label>
                                    <template>&lt;a target="_blank" href="/sfc/servlet.shepherd/version/download/{{{ContentDocument.LatestPublishedVersionId}}}"&gt;{{{ContentDocument.Title}}}&lt;/a&gt;</template>
                                </field>
                                <field type="IMAGE" hideable="true" uniqueid="fi-IA_-437">
                                    <label>Image</label>
                                    <url>/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB240BY180&amp;versionId={{{ContentDocument.LatestPublishedVersion.Id}}}</url>
                                </field>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                                <action type="multi" label="Set {{ContentDocument.Title}} as Image" icon="sk-icon-personal-info">
                                    <actions>
                                        <action type="updateRow" fieldmodel="Contact" affectedrows="context" field="Description" enclosevalueinquotes="true" value="{{{ContentDocument.LatestPublishedVersionId}}}"/>
                                        <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="requeryModel" model="Contact" behavior="standard"/>
                                    </actions>
                                </action>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                        </skootable>
                    </components>
                    <oninitialshowactions/>
                    <onshowactions/>
                </tab>
            </tabs>
        </tabset>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
        <actionsequences uniqueid="sk-2RUGHd-473"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
    <interactions/>
</skuidpage>