MemberJunction / MemberJunction/MJ
MJStorage: File Browser & Per-Record Attachments UI
- Dominant language
- TSQL
- Stars
- 29
- Forks
- 6
- Avg merge
- 2d 1h
- Merged PRs (30d)
- 323
Description
## Overview
Build a unified file browser UI and per-record attachment viewer to make MJStorage a first-class feature.
**Assigned to:** Ian
**Package:** `packages/MJStorage`, `packages/Angular/Generic/file-storage`
**Plan Document:** [plans/tech-fellow-onboarding-tasks.md](https://github.com/MemberJunction/MJ/blob/next/plans/tech-fellow-onboarding-tasks.md#project-2-mjstorage-file-browser--attachments-ui)
## Current State
MJStorage has solid backend infrastructure but limited UI:
- ✅ 7 storage provider drivers (AWS S3, Azure Blob, Google Cloud, Google Drive, Dropbox, Box, SharePoint)
- ✅ Provider abstraction via `FileStorageBase` class
- ✅ Pre-authenticated upload/download URLs
- ✅ `FileEntityRecordLink` entity for per-record attachments
- ✅ Basic Angular components (`FileUploadComponent`, `FilesGridComponent`)
- ❌ No unified "file browser" UI across providers
- ❌ No Mac Finder-style navigation
- ❌ Per-record attachment viewing is basic
## Phase 1: Unified File Browser Component
**Goal:** Create a Mac Finder-style file browser that works across all configured storage providers.
### Design Concept
```
┌─────────────────────────────────────────────────────────────────────┐
│ File Browser [X] │
├──────────────┬──────────────────────────────────────────────────────┤
│ PROVIDERS │ 📁 Documents / Reports / [⬆️][🔄] │
│ │ ──────────────────────────────────────────────────── │
│ 🪣 AWS S3 │ Name Type Size Modified │
│ ☁️ Azure │ 📁 2024-Q1 folder - Jan 15 │
│ 📁 Google Dr │ 📄 summary.pdf PDF 2.4MB Dec 10 │
└──────────────┴──────────────────────────────────────────────────────┘
```
### Tasks
- [ ] Create File Browser Shell Component (three-panel layout)
- [ ] Provider Selector Panel (load active providers, show icons)
- [ ] Folder Navigation (breadcrumbs, tree view, double-click)
- [ ] File Grid/List View (toggle views, sort, multi-select)
- [ ] File Operations (upload, create folder, rename, delete, download)
- [ ] Search within current provider
### Success Criteria
- [ ] Can browse files across all configured providers
- [ ] Folder navigation works (breadcrumbs, tree, double-click)
- [ ] Can upload/download/delete files
- [ ] Search works within provider
- [ ] Responsive design works on mobile
## Phase 2: Per-Record Attachment Viewer
**Goal:** Enable any entity record to display and manage its attached files.
### Design Concept
```
┌─────────────────────────────────────────────────────────────────────┐
│ Customer Record: Acme Corp │
├─────────────────────────────────────────────────────────────────────┤
│ [Details] [Activity] [Attachments (3)] [Notes] │
├─────────────────────────────────────────────────────────────────────┤
│ 📄 Contract_2024.pdf 2.4 MB [👁️][⬇️][🗑️] │
│ 📊 Financial_Summary.xlsx 156 KB [👁️][⬇️][🗑️] │
└─────────────────────────────────────────────────────────────────────┘
```
### Tasks
- [ ] Create Attachment Panel Component
- [ ] Query `FileEntityRecordLink` for attachments
- [ ] Add/remove attachment operations
- [ ] File Preview Modal (images, PDFs)
- [ ] Easy integration directive for entity forms
### Success Criteria
- [ ] Attachment panel loads files for any entity/record
- [ ] Can add new attachments (upload + link)
- [ ] Can remove attachments
- [ ] Preview works for images and PDFs
- [ ] Easy to integrate into existing entity forms
## Phase 3 (Stretch): Agent Framework Integration
- [ ] File context for agents (attached files in agent context)
- [ ] File Actions (ReadFile, SearchFiles, AttachFile)
## Key Files
| File | Purpose |
|------|---------|
| `packages/MJStorage/src/generic/FileStorageBase.ts` | Base class (~800 lines) |
| `packages/MJStorage/src/drivers/*.ts` | Provider implementations |
| `packages/Angular/Generic/file-storage/src/lib/` | Existing Angular components |
| `packages/MJServer/src/resolvers/FileResolver.ts` | GraphQL file operations |
## Key Entities
- `FileStorageProvider` - Provider configuration
- `File` - File metadata (name, contentType, providerKey, status)
- `FileEntityRecordLink` - Links files to ANY entity record
- `FileCategory` - Hierarchical organization
Contributor guide
Assessment
This issue has not been assessed yet.