Ctrlk
Sign Up for Adalo
For the complete documentation index, see llms.txt. This page is also available as Markdown.

File Viewer

Display PDF, Word, Excel, and PowerPoint files directly inside your Adalo app -- no external browser required. Connect any File property from your database and the component automatically detects the file type and loads the correct viewer. Perfect for document-heavy apps like portals, HR tools, contract managers, and e-learning platforms.

Getting Started

Add the File Viewer component to any screen and connect the File URL prop to a File property in your database. The component will detect the extension and render the file inline. PDFs open natively; Word, Excel, and PowerPoint files open via Microsoft Office Online Viewer.

Supported formats: .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx

Settings

File URL

The URL of the file to display. Connect this to a File property from your database using Magic Text. The component reads the file extension from the URL to determine which viewer to use. (default: empty)

Appearance

Background Color -- The background shown behind the file while it loads and around the viewer frame. (default: app background color)

Corner Radius -- Rounds the corners of the component frame. Set to 0 for sharp corners or up to 32 for rounded. (default: 8)

Loading Spinner Color -- The color of the activity spinner shown while the file loads. (default: app primary color)

Text

Loading Text -- The message shown below the spinner while the file is loading. (default: "Loading file…")

Unsupported File Text -- Shown when the connected file has an extension that is not supported (e.g. .zip, .mp4). (default: "This file type cannot be previewed.")

No File Text -- Shown when the File URL is empty or no file has been uploaded to the record yet. (default: "No file selected.")

Actions

On Load Error -- Fires if the viewer fails to load the file. Use this to show a notification, navigate away, or log the error. Common causes: the file URL is not publicly accessible, or the Office Online Viewer is temporarily unavailable.

Actions

On Load Error

Triggered when the file viewer encounters an error loading the document. This fires on both network failures and cases where the Office Online Viewer rejects the URL.

  • When it fires: After a failed load attempt

  • Data passed: None

  • Example use case: Show a toast notification ("Could not load file, please try again") or navigate the user to a fallback screen

Tips & Best Practices

  • Files must be publicly accessible -- The Microsoft Office Online Viewer fetches files directly from the URL. Files stored in Adalo's database are public CDN URLs and work out of the box.

  • Use No Formatting for file Magic Text -- When binding a File property, make sure you select the raw URL value, not a display-formatted version.

  • Resize vertically to fit your screen -- The component defaults to 500px tall. Drag the bottom handle to fill the available screen space for the best reading experience.

  • Show a fallback for empty states -- Use Adalo's visibility rules to hide the File Viewer and show a placeholder image or text when no file has been uploaded yet.

  • Unsupported types won't crash -- If a user uploads an unsupported file type, the component shows the Unsupported File Text gracefully instead of breaking.

  • Test with your own files -- The Office Online Viewer can be selective about third-party CDN URLs. Always test with files uploaded directly to your Adalo database.

  • Large files load slower -- The Office Online Viewer has a ~25MB limit. For very large files, consider linking out to a download instead of embedding inline.

Example Use Cases

Client Portal -- Store signed contracts as .docx or .pdf files on a Contracts collection. Let clients log in and view their documents inline without leaving the app.

HR Onboarding App -- Upload employee handbooks, policy documents, and training materials as PDFs. Display them on an onboarding checklist screen so new hires can read and acknowledge each one.

E-Learning Platform -- Attach lesson materials as .pptx slide decks or .xlsx worksheets to course records. Students can review materials directly on the lesson screen.

Property Management App -- Store lease agreements and inspection reports as PDFs on property records. Landlords and tenants can view documents from their respective dashboards.

Invoice & Finance App -- Link .xlsx spreadsheets or .pdf invoices to transaction records. Give users a clean way to review financial documents without switching apps.

Was this helpful?