MemberJunction / MemberJunction/MJ

MJStorage: File Browser & Per-Record Attachments UI

Open
#1,782 0 comments 0 reactions 1 assignee Claimed by @bc-izygmunt View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.