@memberjunction/ng-file-storage

Angular components for managing file storage in MemberJunction applications, providing a complete file management system with category trees, file grids, upload with overwrite protection, and integration with MemberJunction's pluggable storage providers.

Overview

The @memberjunction/ng-file-storage package provides three core components that together form a file management interface: a hierarchical category tree for organizing files, a Kendo Grid for browsing and managing files within categories, and an upload component with provider integration and overwrite protection. All file operations flow through MemberJunction's entity system and storage provider abstraction, supporting Azure Blob Storage, AWS S3, and other backends.

flowchart TD
    subgraph UI["File Management UI"]
        CT[CategoryTreeComponent] --> FG[FilesGridComponent]
        FG --> FU[FileUploadComponent]
    end

    subgraph Operations["File Operations"]
        FU --> UPLOAD[Upload to Provider]
        FG --> DOWNLOAD[Download via Signed URL]
        FG --> DELETE[Delete with Confirmation]
        FG --> EDIT[Edit Metadata]
        CT --> CREATE[Create Category]
        CT --> DND[Drag & Drop Reorganize]
    end

    subgraph Backend["MJ Integration"]
        ENTITY[Entity Framework] --> GQL[GraphQL API]
        GQL --> PROVIDER[Storage Provider]
        PROVIDER --> AZURE[Azure Blob]
        PROVIDER --> S3[AWS S3]
    end

    Operations --> Backend

    style UI fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Operations fill:#7c5295,stroke:#563a6b,color:#fff
    style Backend fill:#2d8659,stroke:#1a5c3a,color:#fff
Copy

Installation

npm install @memberjunction/ng-file-storage
Copy

Prerequisites

Before using this package, ensure your MemberJunction database has:

• File Storage Providers configured and active
• File Categories entity permissions for users
• Files entity permissions for users
• GraphQL endpoints configured

Usage

Import the Module

import { FileStorageModule } from '@memberjunction/ng-file-storage';

@NgModule({
  imports: [FileStorageModule]
})
export class YourModule { }
Copy

File Browser Layout

<div style="display: flex; height: 600px;">
  <div style="width: 300px; border-right: 1px solid #ccc;">
    <mj-files-category-tree
      (categorySelected)="selectedCategoryId = $event">
    </mj-files-category-tree>
  </div>
  <div style="flex: 1;">
    <mj-files-grid
      [CategoryID]="selectedCategoryId">
    </mj-files-grid>
  </div>
</div>
Copy

File Upload

<mj-files-file-upload
  [CategoryID]="selectedCategoryId"
  (uploadStarted)="onUploadStarted()"
  (fileUpload)="onFileUploaded($event)">
</mj-files-file-upload>
Copy

Complete Example

import { Component, ViewChild } from '@angular/core';
import { FilesGridComponent, FileUploadEvent } from '@memberjunction/ng-file-storage';

@Component({
  selector: 'app-document-manager',
  template: `
    <div class="file-manager">
      <div class="categories">
        <mj-files-category-tree
          (categorySelected)="onCategorySelected($event)">
        </mj-files-category-tree>
      </div>
      <div class="files">
        <mj-files-file-upload
          [CategoryID]="selectedCategoryId"
          (fileUpload)="onFileUploaded($event)">
        </mj-files-file-upload>
        <mj-files-grid #filesGrid
          [CategoryID]="selectedCategoryId">
        </mj-files-grid>
      </div>
    </div>
  `
})
export class DocumentManagerComponent {
  @ViewChild('filesGrid') filesGrid!: FilesGridComponent;
  selectedCategoryId: string | undefined;

  onCategorySelected(categoryId: string | undefined) {
    this.selectedCategoryId = categoryId;
  }

  onFileUploaded(event: FileUploadEvent) {
    if (event.success) {
      console.log('Uploaded:', event.file.Name);
    }
  }

  refreshFiles() {
    this.filesGrid.Refresh();
  }
}
Copy

API Reference

CategoryTreeComponent (mj-files-category-tree)

Hierarchical tree view for managing file categories with drag-and-drop reorganization.

Outputs

Public Methods

FilesGridComponent (mj-files-grid)

Kendo Grid for displaying and managing files with inline editing.

Inputs

Public Methods

RecordAttachmentsComponent (mj-record-attachments)

Slide-in drawer and standalone component for managing file attachments linked to specific entity records via MJ: File Entity Record Links and MJ: Files.

Features:

• Slide-in & Resizable: Built on <mj-slide-panel> with UserInfoEngine width persistence.
• Provider Filtering: Filter attachments across all configured cloud storage providers (Azure Blob, AWS S3, Box, etc.).
• Dual View Modes: Card/Grid view with rich thumbnails and compact table/list view.
• Drag-and-Drop Uploader: Direct upload pipeline with target storage account picker and signed token generation.
• Rich Media Preview: In-app previews for PDFs, Images, Audio, Video, Code/Text, and Documents.
• Cancelable Before/After Events: Full event lifecycle for uploads, deletions, unlinking, downloads, previews, and replacements.
• Programmatic Verbs: Data model and action methods callable via code.

Inputs

Outputs & Cancelable Events

Public Methods (Programmatic Verbs)

Types

FileUploadEvent

type FileUploadEvent =
  | { success: true; file: FileEntity }
  | { success: false; file: FileInfo };
Copy

Upload Flow

1. User selects a file through the upload component
2. A preliminary file record is created in the MemberJunction system
3. If a file with the same name exists, a confirmation dialog appears
4. On confirmation, the file uploads to the active storage provider
5. The file record status updates to "Uploaded"
6. The fileUpload event emits with success status and file details

Key Behaviors

• File deletion is restricted based on upload status and age (10 minutes for pending files)
• Overwrite protection prompts users before replacing existing files
• Download uses provider-specific signed URLs for security
• Category drag-and-drop supports reorganizing the hierarchy
• All operations include loading state indicators

Dependencies

Runtime Dependencies

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x
• @angular/router ^21.x

Build

cd packages/Angular/Generic/file-storage
npm run build
Copy

License

Business Source License 1.1 — see LICENSE for details.