Add MinIO file browser with upload, preview, and management features

- Implement file browser UI with upload/download capabilities - Add API endpoints for file operations (list, upload, delete, preview) - Create FileUploader and FilePreviewModal components - Configure MinIO integration with environment variables - Add documentation for MinIO file browser setup
2025-06-04 16:32:50 +02:00
parent 42efcf3ce1
commit 61cefa530e
16 changed files with 2017 additions and 0 deletions
--- a/docs/minio-file-browser.md
+++ b/docs/minio-file-browser.md
@@ -0,0 +1,132 @@
+# MinIO File Browser Integration
+
+This document describes the MinIO S3-compatible file browser integration in the Port Nimara Client Portal.
+
+## Features
+
+- **File Management**: Upload, download, delete, and view files
+- **Folder Organization**: Create and navigate folder structures
+- **File Preview**: View images and PDFs directly in the browser
+- **Search**: Quick file search functionality
+- **Audit Logging**: Track all file operations with user information
+- **Drag & Drop**: Easy file uploads with drag and drop support
+- **Size Limit**: 50MB maximum file size per upload
+
+## Configuration
+
+### Environment Variables
+
+Add the following to your `.env` file:
+
+```bash
+NUXT_MINIO_ACCESS_KEY=your-minio-access-key
+NUXT_MINIO_SECRET_KEY=your-minio-secret-key
+```
+
+### MinIO Settings
+
+The MinIO configuration is set in `nuxt.config.ts`:
+
+```javascript
+minio: {
+  endPoint: "s3.portnimara.com",
+  port: 9000,
+  useSSL: true,
+  bucketName: "client-portal",
+}
+```
+
+## File Structure
+
+```
+server/
+├── api/
+│   └── files/
+│       ├── list.ts         # List files and folders
+│       ├── upload.ts       # Upload files
+│       ├── download.ts     # Generate download URLs
+│       ├── delete.ts       # Delete files/folders
+│       ├── create-folder.ts # Create new folders
+│       └── preview.ts      # Generate preview URLs
+├── utils/
+│   └── minio.ts           # MinIO client utilities
+
+pages/
+└── dashboard/
+    └── file-browser.vue   # Main file browser page
+
+components/
+├── FileUploader.vue       # File upload component
+└── FilePreviewModal.vue   # File preview modal
+```
+
+## API Endpoints
+
+### List Files
+- **GET** `/api/files/list`
+- Query params: `prefix` (folder path), `recursive` (boolean)
+
+### Upload Files
+- **POST** `/api/files/upload`
+- Body: FormData with files
+- Query params: `path` (current folder)
+
+### Download File
+- **GET** `/api/files/download`
+- Query params: `fileName`
+
+### Delete File/Folder
+- **POST** `/api/files/delete`
+- Body: `{ fileName, isFolder }`
+
+### Create Folder
+- **POST** `/api/files/create-folder`
+- Body: `{ folderPath }`
+
+### Preview File
+- **GET** `/api/files/preview`
+- Query params: `fileName`
+
+## Usage
+
+1. Navigate to "File Browser" from the dashboard menu
+2. Use the interface to:
+   - Upload files by dragging or clicking "Upload Files"
+   - Create folders with "New Folder" button
+   - Navigate folders by clicking on them
+   - Preview images and PDFs by clicking the eye icon
+   - Download files with the download icon
+   - Delete files/folders with the delete icon
+
+## Audit Logging
+
+All file operations are logged with:
+- User email
+- Action type (upload, download, delete, create_folder)
+- File path
+- Timestamp
+- IP address
+- Success status
+
+Currently logs to console, but can be easily integrated with your database.
+
+## Security
+
+- All operations require authentication
+- File names are sanitized to prevent security issues
+- Presigned URLs expire after 1 hour
+- 50MB file size limit enforced
+
+## Supported File Types
+
+All file types are supported for upload/download. Preview is available for:
+- Images: JPG, JPEG, PNG, GIF, SVG, WebP
+- Documents: PDF
+
+## Future Enhancements
+
+- Database storage for audit logs
+- File sharing with expiration
+- Bulk operations
+- File versioning
+- Integration with Interest management (link files to specific interests)