Hey Folks,
I’m working on integrating my Nextcloud instance with a React application for file collaboration. My Nextcloud server is configured with Collabora Online to handle .docx, .odt, and other document formats. However, I’m facing issues displaying and editing files within my React app.
What I Have Tried So Far:
- Embedding Public Share Links:
- I generated a public share link for a document and tried embedding it in an
<iframe>. - Result: The file opens but is read-only, and editing is not possible.
- Using Nextcloud WebDAV API:
- I fetched document URLs using the WebDAV API and tried to open them in a new tab or iframe.
- Result: The files do not open in Collabora Online; they download instead.
- WOPI Integration:
- I checked if I could use WOPI (Web Application Open Platform Interface), but I could not find clear documentation on how to generate a proper WOPI URL for Collabora Online.
- Result: Unclear how to proceed with authentication and file URLs.
My Goal:
I want to allow users to open and edit Nextcloud documents within my React app using Collabora Online, just like they would inside the Nextcloud web interface. Ideally, the user should be able to:
Open the document in an embedded editor (like an iframe).
Edit the document in real-time (not just view it).
Save changes back to Nextcloud automatically.
Questions:
- What is the correct approach to open a Nextcloud document in Collabora Online from an external React app?
- Is WOPI required, and if so, how do I correctly generate and use the WOPI URL?
- Are there any API endpoints or direct Nextcloud URLs that allow opening documents for editing?
- Has anyone successfully implemented this and can share an example or best practices?
I’d appreciate any insights, documentation references, or sample implementations!