feat: add complete meeting attachments functionality with file upload by asithade · Pull Request #29 · linuxfoundation/lfx-v2-ui

asithade · 2025-08-08T17:22:39Z

Summary

Add file upload and attachment display functionality for meetings, enabling users to attach documents (PDF, Word, Excel, PowerPoint, images) when creating meetings.

Key Changes

File Upload: Immediate upload to Supabase storage on file selection with progress indicators
Meeting Form: Drag & drop file upload with pending attachment management
Meeting Cards: Display attachments with file type icons and download links
REST API: Direct Supabase Storage integration without SDK dependency
Database: Store attachment metadata in meeting_attachments table

Technical Details

Created reusable FileUploadComponent wrapper for PrimeNG
Added FileTypeIconPipe and FileSizePipe for display formatting
Base64 encoding for file uploads through REST API
Full TypeScript implementation with proper interfaces

Test Plan

Build passes successfully
TypeScript linting and type checking pass
File upload works with drag & drop
Attachments display correctly in meeting cards
Files are downloadable from meeting cards

🤖 Generated with Claude Code

Signed-off-by: Asitha de Silva <asithade@gmail.com>

- Add file upload functionality to meeting creation form - Implement immediate file uploads with progress indicators - Create reusable file upload component wrapper for PrimeNG - Add attachment display in meeting cards with file type icons - Support for PDF, Word, Excel, PowerPoint, and image files - REST API integration with Supabase storage (no SDK required) - Created pipes for file type icons and file size formatting - Add attachment CRUD operations in backend API - Store attachment metadata in meeting_attachments table - Display attachments in meeting cards for all scenarios - Combine attachments and important links in unified resource section 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Asitha de Silva <asithade@gmail.com>

coderabbitai · 2025-08-08T17:22:46Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/meeting-attachments

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

- Extract duplicated allowed file types array to ALLOWED_FILE_TYPES constant - Extract file size limits to MAX_FILE_SIZE_BYTES constant - Move filename sanitization to reusable sanitizeFilename utility in utils folder - Remove code duplication between upload endpoints in meetings.ts Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com>

Copilot

Pull Request Overview

This PR adds complete file upload and attachment functionality for meetings, enabling users to attach documents (PDF, Word, Excel, PowerPoint, images) when creating meetings with immediate upload to Supabase storage.

Added file upload capabilities with drag & drop support and progress indicators
Integrated Supabase Storage for file management with REST API approach
Created reusable file upload component and utility pipes for file handling
Enhanced meeting forms and cards to display and manage attachments

Reviewed Changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/shared/src/utils/file.utils.ts	Added file sanitization utility function
packages/shared/src/interfaces/meeting-attachment.interface.ts	Created interfaces for meeting attachments and file uploads
packages/shared/src/constants/file-upload.ts	Defined allowed file types and size limits
apps/lfx-pcc/src/server/services/supabase.service.ts	Added Supabase Storage integration and meeting attachment CRUD operations
apps/lfx-pcc/src/server/routes/meetings.ts	Added REST endpoints for file uploads and attachment management
apps/lfx-pcc/src/app/shared/services/meeting.service.ts	Added frontend methods for file uploads and attachment operations
apps/lfx-pcc/src/app/shared/pipes/	Created file type icon and file size formatting pipes
apps/lfx-pcc/src/app/shared/components/file-upload/	Built reusable file upload component wrapper for PrimeNG
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-form/	Enhanced meeting form with file upload functionality
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/	Added attachment display with download links

packages/shared/src/constants/file-upload.ts

apps/lfx-pcc/src/server/routes/meetings.ts

apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-form/meeting-form.component.ts

apps/lfx-pcc/src/server/routes/meetings.ts

apps/lfx-pcc/src/server/services/supabase.service.ts

Signed-off-by: Asitha de Silva <asithade@gmail.com>

- Add application/vnd.ms-excel and application/vnd.openxmlformats-officedocument.spreadsheetml.sheet for Excel files - Add application/vnd.ms-powerpoint and application/vnd.openxmlformats-officedocument.presentationml.presentation for PowerPoint files - File type icon pipe already supports these file types Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com>

* feat: implement committee management for meetings - Add committee association functionality to meetings with modal interface - Display committee members with deduplication and enhanced table styling - Prevent editing of committee members with informational messages - Support multi-select committee dropdown with dynamic helper text - Cache committee member data to optimize API calls - Show voting columns only when committees have voting enabled 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * refactor: optimize committee modal table and member display - Fix incorrect colspan calculation using computed property - Replace forEach with flatMap for better performance in member collection - Implement single-pass deduplication instead of array mutation - Add duplicate committee name prevention for members 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: enhance committee modal with testing support and memory leak prevention - Add data-testid attributes to multi-select and action buttons for reliable E2E testing - Implement takeUntilDestroyed for automatic subscription cleanup - Follow project testing guidelines with hierarchical testid naming convention - Prevent memory leaks in valueChanges subscription 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * perf: optimize committee member deduplication with O(n) Map-based algorithm Replace inefficient O(n²) flatMap/reduce/find chain with Map-based deduplication for better performance with large committee member datasets. - Use Map<email, member> for O(n) lookups instead of O(n²) array operations - Add null safety check for member email addresses - Consolidate duplicate imports for cleaner code - Maintain same functionality while improving scalability Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Asitha de Silva <asithade@gmail.com> * fix: hide members length while loading members Signed-off-by: Asitha de Silva <asithade@gmail.com> * refactor: project uid Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: enhance meeting cards with participant response breakdown and improved link visibility (#27) * feat: implement committee management for meetings - Add committee association functionality to meetings with modal interface - Display committee members with deduplication and enhanced table styling - Prevent editing of committee members with informational messages - Support multi-select committee dropdown with dynamic helper text - Cache committee member data to optimize API calls - Show voting columns only when committees have voting enabled 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * refactor: optimize committee modal table and member display - Fix incorrect colspan calculation using computed property - Replace forEach with flatMap for better performance in member collection - Implement single-pass deduplication instead of array mutation - Add duplicate committee name prevention for members 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: enhance committee modal with testing support and memory leak prevention - Add data-testid attributes to multi-select and action buttons for reliable E2E testing - Implement takeUntilDestroyed for automatic subscription cleanup - Follow project testing guidelines with hierarchical testid naming convention - Prevent memory leaks in valueChanges subscription 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: enhance meeting cards with participant response breakdown and improved link visibility - Add participants_accepted_count, participants_declined_count, and participants_pending_count fields to Meeting interface - Update meeting card component to display response breakdown (e.g., "5 Guests (3 Attending, 1 Not Attending, 1 Pending Response)") - Move important links outside expandable text for better visibility and immediate access - Only show response breakdown when there are individual participants with response data - Improve meeting organizer visibility into participation status and key meeting resources 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> --------- Signed-off-by: Asitha de Silva <asithade@gmail.com> * fix: build issues Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: add complete meeting attachments functionality with file upload (#29) * refactor: rename projectId to projectUid Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: add complete meeting attachments functionality with file upload - Add file upload functionality to meeting creation form - Implement immediate file uploads with progress indicators - Create reusable file upload component wrapper for PrimeNG - Add attachment display in meeting cards with file type icons - Support for PDF, Word, Excel, PowerPoint, and image files - REST API integration with Supabase storage (no SDK required) - Created pipes for file type icons and file size formatting - Add attachment CRUD operations in backend API - Store attachment metadata in meeting_attachments table - Display attachments in meeting cards for all scenarios - Combine attachments and important links in unified resource section 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Asitha de Silva <asithade@gmail.com> * refactor: extract file upload constants to shared package - Extract duplicated allowed file types array to ALLOWED_FILE_TYPES constant - Extract file size limits to MAX_FILE_SIZE_BYTES constant - Move filename sanitization to reusable sanitizeFilename utility in utils folder - Remove code duplication between upload endpoints in meetings.ts Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * refactor: remove unused messages module Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: add Excel and PowerPoint file support to uploads - Add application/vnd.ms-excel and application/vnd.openxmlformats-officedocument.spreadsheetml.sheet for Excel files - Add application/vnd.ms-powerpoint and application/vnd.openxmlformats-officedocument.presentationml.presentation for PowerPoint files - File type icon pipe already supports these file types Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> --------- Signed-off-by: Asitha de Silva <asithade@gmail.com> Co-authored-by: Claude <noreply@anthropic.com> * feat: implement comprehensive pino logging across server-side code (#31) * refactor: rename projectId to projectUid Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: add complete meeting attachments functionality with file upload - Add file upload functionality to meeting creation form - Implement immediate file uploads with progress indicators - Create reusable file upload component wrapper for PrimeNG - Add attachment display in meeting cards with file type icons - Support for PDF, Word, Excel, PowerPoint, and image files - REST API integration with Supabase storage (no SDK required) - Created pipes for file type icons and file size formatting - Add attachment CRUD operations in backend API - Store attachment metadata in meeting_attachments table - Display attachments in meeting cards for all scenarios - Combine attachments and important links in unified resource section 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Asitha de Silva <asithade@gmail.com> * refactor: extract file upload constants to shared package - Extract duplicated allowed file types array to ALLOWED_FILE_TYPES constant - Extract file size limits to MAX_FILE_SIZE_BYTES constant - Move filename sanitization to reusable sanitizeFilename utility in utils folder - Remove code duplication between upload endpoints in meetings.ts Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * refactor: remove unused messages module Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: add Excel and PowerPoint file support to uploads - Add application/vnd.ms-excel and application/vnd.openxmlformats-officedocument.spreadsheetml.sheet for Excel files - Add application/vnd.ms-powerpoint and application/vnd.openxmlformats-officedocument.presentationml.presentation for PowerPoint files - File type icon pipe already supports these file types Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: implement comprehensive pino logging across server-side code - Replace all console.log/console.error statements with structured pino logging - Implement dual logger architecture: serverLogger for non-request context, req.log for request-scoped logging - Add comprehensive comments explaining logging architecture in server.ts - Use snake_case convention for all log properties for consistency - Protect PII by removing sensitive data (names, emails, topics) and using boolean flags - Add structured logging to all routes with operation context, timing, and status codes - Enhance error handling with detailed logging in middleware and services - Add retry and failure logging to API client service with proper error context - Configure pino with appropriate redaction for sensitive headers and tokens - Environment-aware stack trace logging (development only) Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * fix: disable token middleware (#30) Signed-off-by: Asitha de Silva <asithade@gmail.com> --------- Signed-off-by: Asitha de Silva <asithade@gmail.com> Co-authored-by: Claude <noreply@anthropic.com> * fix: increase express body limit to 15mb and complete pino logging migration - Increase express.json limit from 1mb to 15mb to support Base64 file uploads up to 10mb - Convert remaining console statements in meeting attachment routes to req.log - Add tokenRefreshMiddleware back to server configuration - Ensure all server-side logging uses structured pino format with snake_case properties - File upload endpoints now properly support 10mb files (~13mb when Base64 encoded) Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> * feat: enhance file upload security and reorganize shared package utilities This commit implements comprehensive improvements to the file upload system and reorganizes the shared package for better maintainability. File Upload Security Enhancements: - Add client-side file validation (size, type, duplicates, filename security) - Fix RxJS subscription pattern using proper defer/switchMap operators - Remove duplicate Express route handlers in meetings.ts - Harden filename sanitization with comprehensive security checks - Fix data-testid convention for consistent E2E testing Shared Package Reorganization: - Move timezone utility functions from constants to utils folder - Create new timezone.utils.ts with getTimezoneByValue, getUserTimezone, formatTimezoneWithCurrentTime - Update import paths across codebase to use proper utility locations - Maintain proper separation of concerns between constants and utilities Technical Improvements: - Increase Express body limit from 1mb to 15mb for Base64 file uploads - Implement proper error handling with structured logging on server side - Add comprehensive filename security checks (path traversal, Windows reserved names, Unicode normalization) - Replace nested Observable subscriptions with proper RxJS operators - Add immediate client-side feedback for file validation errors All changes tested and verified: - Build passes successfully - Linting standards maintained - License headers properly applied - Import paths resolve correctly 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com> --------- Signed-off-by: Asitha de Silva <asithade@gmail.com> Co-authored-by: Claude <noreply@anthropic.com>

asithade and others added 2 commits August 7, 2025 19:55

refactor: rename projectId to projectUid

0cca6af

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Copilot AI review requested due to automatic review settings August 8, 2025 17:22

asithade requested a review from jordane as a code owner August 8, 2025 17:22

github-actions bot requested review from andrest50, audigregorie and mauriciozanettisalomao August 8, 2025 17:22

github-actions bot assigned asithade Aug 8, 2025

This comment was marked as outdated.

Sign in to view

asithade requested a review from Copilot August 8, 2025 17:32

Copilot AI reviewed Aug 8, 2025

View reviewed changes

asithade added 2 commits August 8, 2025 10:35

refactor: remove unused messages module

4d0538a

Signed-off-by: Asitha de Silva <asithade@gmail.com>

asithade requested a review from dealako August 8, 2025 17:43

asithade merged commit 86c3254 into refactor/project-uid Aug 8, 2025
3 checks passed

asithade deleted the feat/meeting-attachments branch August 8, 2025 18:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add complete meeting attachments functionality with file upload#29

feat: add complete meeting attachments functionality with file upload#29
asithade merged 5 commits intorefactor/project-uidfrom
feat/meeting-attachments

asithade commented Aug 8, 2025

Uh oh!

coderabbitai bot commented Aug 8, 2025 •

edited

Loading

Other AI code review bot(s) detected

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

asithade commented Aug 8, 2025

Summary

Key Changes

Technical Details

Test Plan

Uh oh!

coderabbitai bot commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai bot commented Aug 8, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)