@memberjunction/ng-file-storage

Angular components for managing file storage in MemberJunction applications. This package provides a complete file management system with categories, file upload, and grid display capabilities integrated with MemberJunction's file storage providers.

Features

• Category Management: Create, rename, and organize file categories in a tree structure
• File Grid: Display files with sorting, filtering and pagination
• File Upload: Easy file uploading with progress tracking
• File Operations: Download, delete, and edit file metadata
• Drag and Drop: Move files between categories with drag and drop support
• Integration: Seamless integration with MemberJunction's file storage system
• Provider Support: Works with multiple file storage providers (Azure Blob, AWS S3, etc.)
• Overwrite Protection: Confirmation dialog when overwriting existing files
• Status Management: Track file upload status (Pending, Uploaded, Failed)
• Type Safety: Full TypeScript support with MemberJunction entities

Installation

1npm install @memberjunction/ng-file-storage

Note: This package requires Angular 18.0.2 or later and the following MemberJunction packages:

• @memberjunction/core (^2.43.0)
• @memberjunction/core-entities (^2.43.0)
• @memberjunction/global (^2.43.0)
• @memberjunction/graphql-dataprovider (^2.43.0)

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
• Proper GraphQL endpoints configured

Usage

Import the Module

1import { FileStorageModule } from '@memberjunction/ng-file-storage';
2
3@NgModule({
4  imports: [
5    FileStorageModule,
6    // other imports
7  ],
8  // ...
9})
10export class YourModule { }

Basic Component Usage

1<!-- File management interface with category tree and file grid -->
2<div class="file-manager-container">
3  <div class="category-panel">
4    <mj-files-category-tree
5      (categorySelected)="selectedCategoryId = $event">
6    </mj-files-category-tree>
7  </div>
8  
9  <div class="files-panel">
10    <mj-files-grid
11      [CategoryID]="selectedCategoryId">
12    </mj-files-grid>
13  </div>
14</div>

File Upload Component

1<!-- Standalone file upload component -->
2<mj-files-file-upload
3  [CategoryID]="selectedCategoryId"
4  (uploadStarted)="handleUploadStarted()"
5  (fileUpload)="handleFileUploaded($event)">
6</mj-files-file-upload>

TypeScript Component Example

1import { Component } from '@angular/core';
2import { FileUploadEvent } from '@memberjunction/ng-file-storage';
3import { SharedService } from '@memberjunction/ng-shared';
4
5@Component({
6  selector: 'app-document-manager',
7  template: `
8    <h2>Document Manager</h2>
9    
10    <div class="file-manager">
11      <div class="categories">
12        <h3>Categories</h3>
13        <mj-files-category-tree
14          (categorySelected)="onCategorySelected($event)">
15        </mj-files-category-tree>
16      </div>
17      
18      <div class="files">
19        <h3>Files in {{ currentCategoryName || 'All Categories' }}</h3>
20        <mj-files-grid
21          [CategoryID]="selectedCategoryId">
22        </mj-files-grid>
23      </div>
24    </div>
25  `,
26  styles: [`
27    .file-manager {
28      display: flex;
29      height: 600px;
30    }
31    .categories {
32      width: 300px;
33      border-right: 1px solid #ccc;
34      padding-right: 20px;
35    }
36    .files {
37      flex: 1;
38      padding-left: 20px;
39    }
40  `]
41})
42export class DocumentManagerComponent {
43  selectedCategoryId?: string;
44  currentCategoryName?: string;
45  
46  constructor(private sharedService: SharedService) {}
47  
48  onCategorySelected(categoryId?: string) {
49    this.selectedCategoryId = categoryId;
50    // You could load the category name here if needed
51  }
52  
53  handleFileUploaded(event: FileUploadEvent) {
54    if (event.success) {
55      this.sharedService.CreateSimpleNotification(
56        `File "${event.file.Name}" uploaded successfully`,
57        'success'
58      );
59    } else {
60      this.sharedService.CreateSimpleNotification(
61        `Failed to upload file "${event.file.name}"`,
62        'error'
63      );
64    }
65  }
66}

Component Reference

CategoryTreeComponent (mj-files-category-tree)

A tree view component for managing file categories.

Selector

1selector: 'mj-files-category-tree'

Outputs

Output	Type	Description
categorySelected	EventEmitter<string | undefined>	Emitted when a category is selected in the tree

Public Methods

Method	Description	Parameters	Returns
createNewCategory()	Opens dialog to create a new category	None	Promise<void>
deleteCategory(fileCategory: FileCategoryEntity)	Deletes a category with error handling	fileCategory: FileCategoryEntity	Promise<void>
handleDrop(e: TreeItemAddRemoveArgs)	Handles drag and drop to move categories	e: TreeItemAddRemoveArgs	Promise<void>
Refresh()	Refreshes the category tree data	None	Promise<void>
clearSelection()	Clears the current selection	None	void
saveNewCategory()	Saves a new category	None	Promise<void>
saveRename()	Saves category rename	None	Promise<void>
cancelRename()	Cancels category rename	None	void

FilesGridComponent (mj-files-grid)

A grid component for displaying and managing files with support for inline editing and file operations.

Selector

1selector: 'mj-files-grid'

Inputs

Input	Type	Description	Default
CategoryID	string | undefined	The ID of the category to filter files by	undefined

Public Methods

Method	Description	Parameters	Returns
downloadFile(file: FileEntity)	Downloads file using provider's download URL	file: FileEntity	Promise<void>
deleteFile(file: FileEntity)	Deletes file with confirmation	file: FileEntity	Promise<void>
saveEditFile()	Saves changes to file metadata	None	Promise<void>
resetEditFile()	Cancels editing file metadata	None	void
handleFileUpload(e: FileUploadEvent)	Handles file upload events	e: FileUploadEvent	void
canBeDeleted(file: FileEntity)	Checks if file can be deleted	file: FileEntity	boolean
Refresh()	Refreshes the files grid data	None	Promise<void>

FileUploadComponent (mj-files-file-upload)

A component for uploading files with provider integration and overwrite protection.

Selector

1selector: 'mj-files-file-upload'

Inputs

Input	Type	Description	Default
disabled	boolean	Whether the upload component is disabled	false
CategoryID	string | undefined	The category ID to assign to uploaded files	undefined

Outputs

Output	Type	Description
uploadStarted	EventEmitter<void>	Emitted when file upload starts
fileUpload	EventEmitter<FileUploadEvent>	Emitted when a file is uploaded (success or failure)

Public Methods

Method	Description	Parameters	Returns
Confirm()	Confirms file overwrite and proceeds with upload	None	void
CancelConfirm()	Cancels file overwrite and deletes pending record	None	Promise<void>
Refresh()	Loads default file storage provider	None	Promise<void>
SelectEventHandler(e: SelectEvent)	Handles file selection	e: SelectEvent	Promise<void>

Properties

Property	Type	Description
IsUploading	boolean	Indicates if files are currently being uploaded

Types

FileUploadEvent

1export type FileUploadEvent = 
2  | { success: true; file: FileEntity }
3  | { success: false; file: FileInfo };

This type represents the result of a file upload operation, containing either a successful FileEntity or a failed FileInfo object.

File Upload Flow

1. User selects a file using the file upload component
2. Component creates a preliminary file record in the MemberJunction system
3. If a file with the same name exists, a confirmation dialog is shown
4. On confirmation, the file is uploaded to the storage provider
5. After successful upload, the file record status is updated to "Uploaded"
6. The component emits a fileUpload event with success status and file details

Styling

The components use Kendo UI components for consistent styling and include basic CSS that can be overridden in your application.

Advanced Usage

Custom File Grid with Actions

1import { Component, ViewChild } from '@angular/core';
2import { FilesGridComponent, FileUploadEvent } from '@memberjunction/ng-file-storage';
3import { FileEntity } from '@memberjunction/core-entities';
4
5@Component({
6  template: `
7    <div class="file-manager">
8      <div class="toolbar">
9        <button (click)="refreshFiles()">Refresh</button>
10        <mj-files-file-upload 
11          [CategoryID]="categoryId"
12          (fileUpload)="onFileUploaded($event)">
13        </mj-files-file-upload>
14      </div>
15      
16      <mj-files-grid #filesGrid
17        [CategoryID]="categoryId">
18      </mj-files-grid>
19    </div>
20  `
21})
22export class CustomFileManagerComponent {
23  @ViewChild('filesGrid') filesGrid!: FilesGridComponent;
24  categoryId = 'some-category-id';
25  
26  refreshFiles() {
27    this.filesGrid.Refresh();
28  }
29  
30  onFileUploaded(event: FileUploadEvent) {
31    if (event.success) {
32      console.log('File uploaded:', event.file.Name);
33      // The grid automatically adds the file, no refresh needed
34    }
35  }
36}

Programmatic Category Management

1import { Component, ViewChild } from '@angular/core';
2import { CategoryTreeComponent } from '@memberjunction/ng-file-storage';
3import { Metadata } from '@memberjunction/core';
4import { FileCategoryEntity } from '@memberjunction/core-entities';
5
6@Component({
7  template: `
8    <mj-files-category-tree #categoryTree
9      (categorySelected)="onCategorySelected($event)">
10    </mj-files-category-tree>
11  `
12})
13export class CategoryManagerComponent {
14  @ViewChild('categoryTree') categoryTree!: CategoryTreeComponent;
15  
16  async createCategoryProgrammatically(name: string, parentId?: string) {
17    const md = new Metadata();
18    const category = await md.GetEntityObject<FileCategoryEntity>('File Categories');
19    category.NewRecord();
20    category.Name = name;
21    category.ParentID = parentId;
22    
23    if (await category.Save()) {
24      // Refresh the tree to show new category
25      await this.categoryTree.Refresh();
26    }
27  }
28  
29  onCategorySelected(categoryId?: string) {
30    console.log('Selected category:', categoryId);
31  }
32}

Module Exports

The FileStorageModule exports the following components:

• CategoryTreeComponent
• FilesGridComponent
• FileUploadComponent

Dependencies

MemberJunction Dependencies

• @memberjunction/core (^2.43.0): Core metadata and entity access
• @memberjunction/core-entities (^2.43.0): File-related entity types
• @memberjunction/global (^2.43.0): Global utilities
• @memberjunction/graphql-dataprovider (^2.43.0): GraphQL data operations
• @memberjunction/ng-container-directives (^2.43.0): Container directives
• @memberjunction/ng-shared (^2.43.0): Shared Angular services

Kendo UI Dependencies

• @progress/kendo-angular-buttons (^16.2.0)
• @progress/kendo-angular-dialog (^16.2.0)
• @progress/kendo-angular-dropdowns (^16.2.0)
• @progress/kendo-angular-grid (^16.2.0)
• @progress/kendo-angular-indicators (^16.2.0)
• @progress/kendo-angular-menu (^16.2.0)
• @progress/kendo-angular-treeview (^16.2.0)
• @progress/kendo-angular-upload (^16.2.0)

Other Dependencies

• tslib (^2.3.0)
• zod (^3.23.4): Schema validation

Build and Development

Building the Package

1cd packages/Angular/Generic/file-storage
2npm run build

Watch Mode

1npm run watch

Integration with MemberJunction

This package integrates with:

• File Storage Providers: Automatically uses the highest priority active provider
• GraphQL API: Uses MemberJunction's GraphQL layer for all operations
• Entity Framework: Leverages MemberJunction's entity system for type safety
• Permissions: Respects entity-level permissions for Files and File Categories

Notes

• File deletion is restricted based on upload status and age (10 minutes for pending files)
• The component automatically handles file overwrite scenarios with user confirmation
• All file operations are tracked with status updates (Pending → Uploaded)
• File download uses provider-specific signed URLs for security
• Category operations support drag-and-drop reorganization
• Components include loading states for all async operations