File Upload

Overview

The Avonni File Upload component provides a user-friendly interface that allows users to select and upload one or more files directly from their local device within your Dynamic Component. These uploaded files are typically stored as Salesforce Files (ContentDocument records). They can be automatically linked to a specified parent record, streamlining processes like attaching documents or submitting evidence without needing to navigate to separate file upload areas.

Key Features

• Direct File Upload: Enables users to upload files from within the component.

• Multiple File Support: Option to allow single or multiple file uploads simultaneously.

• Format Restriction: Define acceptable file formats (e.g., PDF, JPG, DOCX).

• Salesforce Integration: Saves uploaded files as Salesforce Files and links them to a specified record.

• Customizable UI: Control labels, help text, file display, and component layout.

• File Naming Options: Add prefixes or suffixes to uploaded file names for better organization.

Use Cases

• Attaching proposals or contracts to Opportunity records.

• Uploading supporting documentation for Case records.

• Adding images or specification sheets to Product records.

• Submitting assignments or completed forms with attachments in a custom workflow.

• Allowing users to upload profile pictures or identification documents.

Adding the File Upload Component

Drag and Drop: From the Component Library (left panel), find the "File Upload" component and drag it onto your canvas within the Component Builder.

Configuration

Select the File Upload component on the canvas to access its properties in the Properties Panel.

Basic Properties

These properties control the fundamental labeling and identification.

• API Name: (Text) A unique identifier for this component instance (e.g., ProposalUploader, CaseAttachmentUpload).

• Label: (Text) The main text label displayed for the file uploader. Example: "Upload Proposal Document:", "Attach Supporting Files:".

• Field Level Help: (Text, Optional) Help text displayed next to the label (often as a question mark icon), providing additional instructions or context about the types of files to upload or size limits.

File Upload Behavior

These settings define how the file upload process works.

• Accepted Formats: (Text) Specify a comma-separated list of file extensions that are allowed for upload (e.g., .pdf,.jpg,.png,.docx). Include the leading dot. Leave blank to allow all file types (not generally recommended for control).

• Allow Multiple Files: (Boolean - Checkbox)

  • Checked: Users can select and upload multiple files simultaneously.

  • Unchecked (Default): Users can only upload a single file per interaction.

• Show File Uploaded: (Boolean - Checkbox) If enabled, the component will display a list or preview of files that have been successfully uploaded within the current session or context.

• Required: (Boolean - Checkbox) If enabled, the user must upload at least one file. This is often used with form validation.

File Association & Naming

These are critical settings for ensuring uploaded files are correctly linked and named in Salesforce.

• Related Record ID: (Text - Essential for Linking) The 15 or 18-character Salesforce ID of the record to which the uploaded file(s) should be associated.

  • How to Set: Typically, you will bind this to a dynamic value using the mapped option:

    • $Component.recordId: Use this if the Dynamic Component has its Target Page Object set and is placed on a record page. This automatically links the file to the current record being viewed.

    • A Variable Resource: Select a Variable that holds the ID of the record you want to link to (e.g., an ID passed into a modal component).

• File Name Prefix: (Text, Optional) Enter text that will be automatically added to the beginning of the original filename when saved in Salesforce. Example: If prefix is Contract_ and user uploads Details.pdf, it might be saved as Contract_Details.pdf.

• File Name Suffix: (Text, Optional) Enter text that will be automatically added to the end of the original filename (before the extension) when saved. Example: If suffix is _Final and user uploads Report.docx, it might be saved as Report_Final.docx.

Display & Layout

These properties control the visual presentation of the component.

• Variant: (Select) Controls the visual style and positioning of the main component Label:

  • standard: Label above the component.

  • label-inline: Label to the left.

  • label-stacked: Label above (may have different styling than standard).

  • label-hidden: Hides the main label.

• Stretch: (Boolean - Checkbox) If enabled, the file uploader interface will attempt to take up the entire available width of its container.

State & Visibility

• Disabled: (Boolean - Checkbox) If enabled, the File Upload component is completely disabled, and the user cannot interact with it.

• Visible: (Boolean) Controls whether the entire File Upload component is visible on the page. Bind this to a Boolean Variable or Formula for dynamic visibility.

Responding to Upload Events

The Avonni File Upload component is designed to automatically handle the file upload to Salesforce and link it to the record specified in the Related Record ID property when the user selects files.

Example: Attaching a Proposal to an Opportunity

1. Dynamic Component Setup: Ensure your Dynamic Component has Target Object API Name set to Opportunity.

2. Add File Upload Component:

   • API Name: ProposalUpload

   • Label: "Upload Proposal Document"

   • Accepted Formats: .pdf,.docx

   • Related Record ID: Bind to $Component.recordId (to link to the current Opportunity).

   • Show File Uploaded: Checked

Result: On an Opportunity page, users can use this component to upload a PDF or DOCX file. The file will be automatically linked to that Opportunity, and a success message will appear.

Key Considerations

• Salesforce File Storage Limits: Be mindful of your org's overall file storage limits.

• User Permissions: Users need appropriate permissions to create ContentDocument (Files) and ContentDocumentLink records to associate files with records.

• File Size Limits: Salesforce imposes limits on the size of individual files. The component may also have its configurable limits.

• Security: Ensure that the ability to upload and link files is appropriate for the users and the context of the page.

• Naming Conventions: Use prefixes/suffixes thoughtfully if you need standardized file naming.

In Summary

The Avonni File Upload component provides a streamlined, no-code way to integrate file uploading and record association directly into your custom Lightning Page experiences, enhancing data completeness and user efficiency