133 lines
3.3 KiB
Markdown
133 lines
3.3 KiB
Markdown
# 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)
|