> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/component-basics/marketplace-components/file-viewer.md). # 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/file-viewer.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.