File Upload

A data component, the File Upload component allows end users to upload and associate files as fields within a record, or remove uploaded files. In some cases, files can be listed in a table, allowing users to click and preview the file; or, a File Upload component can allow users to add an image, such as for a user profile.

Using the File Upload Component

After adding a File Upload component to the page, set the File Properties. End users can upload files by clicking the Upload button and browsing for the file, or files can be dragged and dropped into the upload area.

The File Upload component can be adapted to many uses. The key to its versatility: how you set the Parent Model and File Storage Locations. For example:

Use File Upload with the Salesforce data source type

The File Upload component has specific properties and options when used with a model on a Salesforce data source type.

Let end users add images with File Upload (Salesforce only) [[]]

While the Image component is an obvious choice when adding images to a page, it doesn’t allow end users to add or edit the image at runtime. The Salesforce data source type provides File Upload properties that allow users add/edit/remove an image on a page—for example, add a profile photo on a user detail page.

Set the File Storage Location to In Field on Record, and Display As to File Preview/Image. Then, select a reference field where the uploaded image will be stored (depending upon the object, you may want to create a new field in Salesforce for this purpose). Users will see an upload box with a default image (also set in the properties pane). They can click this to add their photo; once the image is present, they can delete it or replace it with another.

Lightning File Upload [[]]

The File Upload component, when used in a Lightning Experience page, may encounter file size limitations. Skuid’s alternative is to substitute the Lightning File Upload component (which doesn’t have the same size limitations).

Usage [[]]

Check the Use Lightning’s File Upload Component property in the Properties pane to access this feature, which is only available when:

  • Using the Skuid SFX managed package

  • The File Upload’s Data Source Type property is set to Salesforce

  • File Storage is set to one of the following:

    • In Content Document (with Record Context)—available with a Parent model

    • In Content Document—available when the selected Parent Model is None

      Note

      Lightning file size limitations may affect other File Storage options, but Use Lightning’s File Upload Component is only available for the two options indicated above.

Warning

Skuid does not support using the Lightning File Upload option in original component (API v1) popups. However, using the Lightning File Upload component with Ink (API v2) modals is supported.

Functionality differences [[]]

When substituting the Lighting File Upload for Skuid’s File Upload component, some functionality will differ or be unavailable.

Note that, while some properties may still appear in the Composer, they won’t be taken into consideration at runtime.

  • Properties that are not supported in the Lighting File Upload:

    • Basic tab:
      • File Name
      • File Description
    • Advanced tab:
      • Enforce Max File Size
        • Max File Size
  • Features that work differently in the Lighting File Upload:

    • On-upload Failure Actions may not run as expected.

    • On-upload Success Actions and post-upload snippets run after the end user closes the default Lightning confirmation popup.

      Note

      If users close out of their browser window before closing the confirmation popup, success actions and snippets will not run.

Properties

Basic tab [[]]

Standard options [[]]

In the Basic tab, there are several standard options:

  • Save To: Choose to save the attachment to:

    • Data Source: Select the data source where the file will be stored.

      Note

      The File Upload component is not compatible with all data source objects. If you cannot select a model you created on a specific data source object, try selecting “None” and then follow the instructions under If None is selected for the model.

      • Parent Model: The model containing the records that will be associated with the uploaded file. Skuid uses this model’s data source to determine the File Storage Location options. You can also select “None” and designate a data source where the uploaded file will be stored.
      • If None is selected for the parent model
        • Data Source Type: The data source type used to create the target data source (below).
        • Data Source: The target data source for the uploaded file.
      • Data Source Type: The data source type used to create the target data source (below).

      • Data Source: The target data source for the uploaded file.

      • File Storage Location: Files uploaded are stored in a field on the object associated with the model. (For some model types, the location will be automatically filled in.) The file storage options will vary, depending upon the object/data source used by the parent model.

      • File Name: In some cases, you can rename the file. If this field is left blank, the filename will remain the same.

        Note

        This property is not supported in Lightning Experience when using the Lightning File Upload component.

      • Label: Label for the upload button. The default label is “Upload.”

      • File Description: Short descriptive text for uploaded files.

        Note

        This property is not supported in Lightning Experience when using the Lightning File Upload component.

      • Upload URL: Specific URL where the file will be uploaded.

    • Field on Model: Select a field on a model where the file will be stored.

      • Model: The name of the model containing the records that will be associated with the uploaded file. Skuid populates the picklist with all models created on the page.
      • Field: Select the field from the picklist.The field picklist reflects the model selected.In the basic tab, there are several standard options:
  • Auto-refresh related Models on successful upload: If checked, when the file uploads, Skuid will automatically identify models that are displaying data and requery.

Warning

Any unsaved changes on that model will be lost.

Additional options [[]]

Additional options open up, depending on the data source/object selected. These include:

  • Use Lightning’s File Upload Component: If checked, Skuid uses Salesforce Lightning’s File Upload component when displayed within the Lightning Experience runtime. Typically used to get around file upload size limitations. For more information, see the section on File Upload size limitations in Lightning.
  • Upload URL: Specific URL where the file will be uploaded. (REST)
  • Relative folder URL: The server URL for the folder where the file will be uploaded.
  • Parent Folder ID: The ID of the folder where the file will be uploaded. (Google Drive)
  • Snippet to Run on Completion (optional): Name of a Javascript snippet to run on completion of the upload.

If a Salesforce object is selected for the parent model [[]]

Salesforce objects have several File Storage Location choices that may not be available when using other data source types; when chosen, these File Storage Locations cause Skuid to display other properties.

  • In Attachment to Record: The file will be uploaded as an attachment to the record, stored in the Attachment object, and linked to the Parent Id of the record in context.

Need to see the list of attachments that have been uploaded? Create a model on the Attachments object, and add a table see all attachments listed.

Note

Not recommended for use with Lightning Experience. See Using File Upload with Lightning Experience for more information.

  • Custom Owner Id Field: The field that you want to be the “owner ID” of that attachment. By default, whoever is uploading the attachment “owns” it. Select the object’s Owner ID for this field, and when you upload a file to an account owned by someone else, that Owner will automatically be designated attachment owner.
  • In Chatter Feed Item: The file will be uploaded to the user’s associated Chatter Feed and added to the Chatter field for the object associated with the model.

    • Feed text: The text that will accompany the attachment in the Chatter posts.
  • In Field on Record: The file will be uploaded to an image field on a record.

    • Display As:
      • File Name: After the file uploads, the filename displays on the screen. For image files, end users may be able to click the filename to open a preview of the file.
      • File Preview/Image: For use with image files, after the file uploads, the image itself displays on the screen.
        • Default Image: The default image (Person or Org) to display before an actual image is uploaded.
    • Field Name: The object’s field where the attachment is stored.

    Note

    Only the model’s reference fields can be chosen to store the uploaded file.

    • Allow Editing: If checked, an edit icon appears on the file preview allowing end users to replace the file with another.
    • Allow Removal: If checked, a delete icon appears on the file preview allowing end users to remove the file.
  • In Content Document (with Record Context): The file will be uploaded to and stored in the Content Document object, with a link to the ID of the record in context as the value of the Linked Entity ID field—allowing the file to be properly associated with that record. This allows users to view the list of uploaded documents in the Content Document object, and search for objects by record ID.

    Note

    Context is typically provided by using the File Upload component within a row’s drawer. If a parent model is specified, but no row-level context is provided—as is common on detail pages—the first row within the parent model is used to provide context.

    Note

    To view files uploaded to the ContentDocument object, you’ll need a Skuid model for the ContentDocumentLink object. This is the likely scenario for files uploaded through the File Upload component using the File Storage Location property set to the In Content Document (with Record Context) value.

    A Skuid model query on the ContentDocument object does not return the expected results due to the specialized configuration of the object.

    To view ContentDocument object files in a data component (such as Table or Deck), it’s necessary to have a model on the ContentDocumentLink object with, at minimum, the ContentDocument ID reference field and the Linked Entity ID reference field.

    • File Description: Short descriptive text for uploaded files.

    • Auto-refresh related Models on successful upload: If checked, when the file uploads, Skuid will automatically identify models that are displaying data and requery.

      Warning

      Any unsaved changes on that model will be lost.

If None is selected for the parent model on a Salesforce data source type [[]]

  • File Storage Location:
    • In Chatter Files: The file will be uploaded to, and stored in, the Chatter object.
    • In Content Document: The file will be uploaded to, and stored in, the Content object without an associated record.
    • In Static resources: The file will be uploaded to Static Resources

Advanced tab [[]]

  • Enforce Max File Size: If checked, allows the builder to limit the size of the uploaded file.
    • Max File Size: The size limit for uploaded file (in gigabytes, megabytes, kilobytes or bytes).

Note

If you’re using Skuid SFX with the Lightning Experience and encountering difficulty with file size limits, see Lightning File Upload limits.

On-Upload Actions tab [[]]

  • On-Upload Success Actions:
    • Use the Action Framework to launch actions that run if the file uploads successfully.
  • On-Upload Failure Actions:
    • Action Types: Use the Action Framework to launch actions that run if the file fails to upload.

Display Logic tab [[]]

Standard display logic options are available.

Troubleshooting

You can only attach a file to an existing record [[]]

If attempting to attach a file to a new record that has not yet been saved to the database, the upload will fail. You must first save the record before attaching a file to the record.

Note

This behavior may require workarounds to create records and then upload files to them with the File Upload component, particularly with the Wizard component.

Supported use cases for Skuid’s File Upload component in Salesforce environments

Note

As of Winter 2021, Salesforce enforced security setting changes to guest users on public-facing sites. This means that using the File Upload component with guest users in Salesforce Sites and Communities is not supported. If this change affects you and you would like to discuss your use case, then reach out to your Customer Success or Support representative.

Upload method Salesforce Classic Lightning Experience Salesforce Classic: public-facing community Lightning Experience: public-facing community
Record: In Attachment to Record Supported Suported for files < 650kB Supported [*] Not supported
Field: In Field on Record Supported Suported for files < 650kB Supported [†] Not supported
Chatter Feed: In Chatter Field Item Supported Not supported Not supported Not supported
Chatter Files: In Chatter Files Supported Not supported Not supported Not supported
ContentDocument: In Content Document Supported Supported when Use Lightning’s File Upload Component property checked Not supported Supported when Use Lightning’s File Upload Component property checked [‡]
ContentDocument with record context: In Content Document (with Record Context Supported Supported when Use Lightning’s File Upload Component property checked Not supported Supported when Use Lightning’s File Upload Component property checked [§]
Static Resources: In Static Resource Supported Suported for files < 650kB Not supported Not supported
[*]Skuid uses a VisualForce page in an iframe to handle the file upload.
[†]Skuid uses a VisualForce page in an iframe to handle the file upload.
[‡]Support for this use case began in September 2020 with Spark (12.4.15) and Boston (13.0.5).
[§]Support for this use case began in September 2020 with Spark (12.4.15) and Boston (13.0.5).