Nextcloud Integration
Relevant source files
The following files were used as context for generating this wiki page:
Nextcloud CAD Viewer is a native Nextcloud application designed to integrate the @mlightcad/cad-viewer library, enabling the viewing of DWG and DXF files directly within the Nextcloud web interface. The integration leverages Nextcloud's App Framework for backend file handling and security, while using Vue.js on the frontend to provide a responsive, browser-based CAD viewing experience using WebGL technology.
The scope of this integration covers secure file access through Nextcloud's filesystem, automatic file association for CAD extensions, and a specialized API for streaming file content to the frontend viewer. It operates entirely within the browser without additional backend server requirements for the CAD rendering itself.
Sources: appinfo/info.xml:1-15, README.md:1-15
Backend Architecture and File Handling
The backend integration is built on the Nextcloud App Framework, primarily utilizing the FileController to manage file metadata and content streaming. This controller ensures that all file operations respect Nextcloud's built-in permission systems.
File Metadata and Security
The system uses the getFile endpoint to retrieve metadata for specific CAD files. It validates that the user is authenticated and has the necessary permissions to read the requested file ID. It specifically filters for supported CAD MIME types before processing.
Sources: lib/Controller/FileController.php:51-95
Content Streaming
To display the drawing, the integration provides a streaming endpoint (getFileContent). This method opens a file stream from the Nextcloud storage and returns a StreamResponse. This allows the frontend CAD library to consume the file data efficiently.
Sources: lib/Controller/FileController.php:101-140
Supported MIME Types
The integration explicitly supports a wide range of CAD-related MIME types to ensure compatibility with various DWG and DXF sources.
| Category | MIME Type |
|---|---|
| DWG | application/acad, application/autocad_dwg, application/dwg, application/x-autocad, application/x-dwg, image/vnd.dwg |
| DXF | image/vnd.dxf, application/dxf, application/x-dxf, image/x-dxf |
Sources: lib/Controller/FileController.php:26-38, README.md:90-95
Frontend Integration logic
The frontend is a Vue.js application that acts as a wrapper for the @mlightcad libraries. It handles the initialization of the viewer and communicates with the Nextcloud backend via the @nextcloud/router and custom API endpoints.
Initialization Flow
The App.vue component is responsible for detecting the fileId from the environment (data attributes or URL parameters) and generating the authenticated download URL.
The diagram shows the lifecycle of the frontend integration from component mounting to rendering the CAD canvas.
Sources: src/App.vue:31-64
Component Structure
The frontend integration is structured into clear functional blocks:
cad-viewer-wrapper: The main container managing themes and layout.- Loading/Error States: UI feedback for user authentication or file access failures.
cad-viewer-canvas: The target element for the WebGL rendering engine.
Sources: src/App.vue:1-12, src/App.vue:103-143
Request and Data Flow
The integration follows a standard request-response flow for file retrieval, secured by Nextcloud's session management.
This sequence illustrates how the frontend requests an authenticated stream from the backend and how the FileController mediates access to the filesystem.
Sources: src/App.vue:56-60, lib/Controller/FileController.php:108-132
Technical Dependencies
The integration relies on specific versions of the Nextcloud server and frontend packages to maintain compatibility.
Package Requirements
| Package | Version | Purpose |
|---|---|---|
nextcloud/ocp | dev-stable33 | Core Nextcloud Public API |
@mlightcad/cad-viewer | 1.5.0 | Core rendering engine |
@nextcloud/router | ^3.1.0 | URL generation for NC endpoints |
vue | 3.5.34 | Frontend framework |
Sources: composer.json:16, package.json:26-37
Installation and Environment Configuration
The app integrates into the Nextcloud environment through standard installation methods. It requires PHP 8.2 and Nextcloud 33.
MIME Type Configuration
For optimal integration, administrators are often required to configure web server MIME types so that the FileController correctly identifies CAD files.
# Apache Configuration
AddType application/acad .dwg
AddType image/vnd.dxf .dxf
Sources: wiki/Installation-Guide.md:15-30, wiki/Installation-Guide.md:162-175
Conclusion
The Nextcloud Integration for the CAD Viewer provides a secure, seamless bridge between the browser-based CAD rendering library and the Nextcloud file storage system. By utilizing the Nextcloud App Framework, the system ensures that sensitive engineering drawings are accessed only by authorized users while providing a modern Vue-based interface for high-performance viewing.