PROBLEM When a Skuid page was added to a Lightning App Page, the File Upload component in the Skuid page stopped working.
RESOLUTION The File Upload component required the following settings:
File storage location
- In content document
Use Lightning’s file upload component
- Checked
- The component was also moved from within a popup to a sliding panel.
Problem Details
A V1 Skuid page was recently updated to add a popup that includes a way to upload files. It worked as expected during page preview, but when the page was brought into the Lightning environment, the File Upload component on the page would not load. Instead we saw an error message: “Error: Invalid Data Source for File Component: SkuidLocal.” In the developer console, a more detailed error also showed:
skuidReqs.js:2 TypeError: d.teleportLightningComponent is not a function
at eval (lightningPlatform.js:1)
After resolving this issue, the File Upload component would display. But we then encountered another error: “Cannot upload large files in Lightning” which showed in the developer console as:
Uncaught (in promise) Cannot upload large files in Lightning
This error would happen even if the file was very small.
Resolution Process
- When looking for clues, it can be difficult to know which aspects of your page and environment are relevant to the issue. So a good practice is to start with a blank page, and build it into the simplest possible page that will reproduce the issue at hand. If this approach doesn’t work, then an alternative is to clone the problematic page and remove JavaScript, CSS, page components, fields, models, etc. until you have the bare minimum required to reproduce the problem.
To this end, we tried building a simple page from scratch.
- Then we brought the simple page into the Lightning environment, just like the original page.
- We did not see the issue- the file uploaded successfully. This meant there was something missing from our attempt to reproduce the problem.
- Next, we cloned the original page, and simplified it by removing all elements that weren’t relevant to the issue.
- We brought this clone into the Lightning environment and verified that it did still exhibit the incorrect behavior ("Error: Invalid Data Source for File Component: SkuidLocal.") Since the simple page worked fine, this probably meant that there was something about the original page’s setup that’s relevant to the issue, as opposed to a permissions issue, product issue, or anything like that.
Therefore, we looked for tweaks we could make to the page, to see if we could change or fix the File Upload behavior. This can be time-consuming, but it’s a quicker process when the page has been simplified, because there are fewer possible adjustments to test. (Check out the General Troubleshooting Process and Checklist documentation for more ways to streamline the troubleshooting process!)
We found through trial and error that the File Upload component worked fine if we moved it to the top level of the page, instead of nested inside of a popup. This was a big clue; somehow the location of the File Upload component in the page was relevant to the issue.
At this point, we turned to our documentation to see if there were any documented quirks, considerations, or limitations regarding the File Upload component.
Outcome
Through reviewing Skuid’s documentation on the File Upload component, we found that file uploads in Lightning need to target the Content Document object, instead of the Chatter Feed, or attachment object. This is adjusted via the File Upload component’s File storage location property.
We also found that if the Skuid page is used in Lightning, the File Upload component should be set up to “Use Lightning’s file upload component.”
Finally, we discovered that Lightning File Upload components cannot be used inside Skuid popups. This is why we were seeing “cannot upload large files in Lightning” error. Instead, we moved the File Upload component into a sliding panel.
Takeaways
Content Documents are the newest, most flexible, and most complicated of the places you can upload files in Salesforce. Skuid is compatible with them, but in Lightning there are inherent limitations that mean Skuid’s File Upload component needs to be set up a certain way to work properly.
Skuid’s documentation walks through these considerations:
https://docs.skuid.com/latest/v2/en/skuid/components/ink/file-upload
Salesforce’s documentation can help explain the complexity that comes with the feature-rich Content Document:
Get help with an issue
Ask in the Skuid user community in the questions category.
If you have paid support, ask your question on our support portal
skuid.freshdesk.com.If you’re interested in support, contact your Account Executive.
