@memberjunction/ng-file-storage 4.0.0 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +139 -282
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -1,19 +1,40 @@
|
|
|
1
1
|
# @memberjunction/ng-file-storage
|
|
2
2
|
|
|
3
|
-
Angular components for managing file storage in MemberJunction applications
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
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.
|
|
8
|
+
|
|
9
|
+
```mermaid
|
|
10
|
+
flowchart TD
|
|
11
|
+
subgraph UI["File Management UI"]
|
|
12
|
+
CT[CategoryTreeComponent] --> FG[FilesGridComponent]
|
|
13
|
+
FG --> FU[FileUploadComponent]
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
subgraph Operations["File Operations"]
|
|
17
|
+
FU --> UPLOAD[Upload to Provider]
|
|
18
|
+
FG --> DOWNLOAD[Download via Signed URL]
|
|
19
|
+
FG --> DELETE[Delete with Confirmation]
|
|
20
|
+
FG --> EDIT[Edit Metadata]
|
|
21
|
+
CT --> CREATE[Create Category]
|
|
22
|
+
CT --> DND[Drag & Drop Reorganize]
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
subgraph Backend["MJ Integration"]
|
|
26
|
+
ENTITY[Entity Framework] --> GQL[GraphQL API]
|
|
27
|
+
GQL --> PROVIDER[Storage Provider]
|
|
28
|
+
PROVIDER --> AZURE[Azure Blob]
|
|
29
|
+
PROVIDER --> S3[AWS S3]
|
|
30
|
+
end
|
|
31
|
+
|
|
32
|
+
Operations --> Backend
|
|
33
|
+
|
|
34
|
+
style UI fill:#2d6a9f,stroke:#1a4971,color:#fff
|
|
35
|
+
style Operations fill:#7c5295,stroke:#563a6b,color:#fff
|
|
36
|
+
style Backend fill:#2d8659,stroke:#1a5c3a,color:#fff
|
|
37
|
+
```
|
|
17
38
|
|
|
18
39
|
## Installation
|
|
19
40
|
|
|
@@ -21,19 +42,13 @@ Angular components for managing file storage in MemberJunction applications. Thi
|
|
|
21
42
|
npm install @memberjunction/ng-file-storage
|
|
22
43
|
```
|
|
23
44
|
|
|
24
|
-
**Note**: This package requires Angular 21 or later and the following MemberJunction packages:
|
|
25
|
-
- `@memberjunction/core` (^2.43.0)
|
|
26
|
-
- `@memberjunction/core-entities` (^2.43.0)
|
|
27
|
-
- `@memberjunction/global` (^2.43.0)
|
|
28
|
-
- `@memberjunction/graphql-dataprovider` (^2.43.0)
|
|
29
|
-
|
|
30
45
|
## Prerequisites
|
|
31
46
|
|
|
32
47
|
Before using this package, ensure your MemberJunction database has:
|
|
33
48
|
- File Storage Providers configured and active
|
|
34
49
|
- File Categories entity permissions for users
|
|
35
50
|
- Files entity permissions for users
|
|
36
|
-
-
|
|
51
|
+
- GraphQL endpoints configured
|
|
37
52
|
|
|
38
53
|
## Usage
|
|
39
54
|
|
|
@@ -43,27 +58,21 @@ Before using this package, ensure your MemberJunction database has:
|
|
|
43
58
|
import { FileStorageModule } from '@memberjunction/ng-file-storage';
|
|
44
59
|
|
|
45
60
|
@NgModule({
|
|
46
|
-
imports: [
|
|
47
|
-
FileStorageModule,
|
|
48
|
-
// other imports
|
|
49
|
-
],
|
|
50
|
-
// ...
|
|
61
|
+
imports: [FileStorageModule]
|
|
51
62
|
})
|
|
52
63
|
export class YourModule { }
|
|
53
64
|
```
|
|
54
65
|
|
|
55
|
-
###
|
|
66
|
+
### File Browser Layout
|
|
56
67
|
|
|
57
68
|
```html
|
|
58
|
-
|
|
59
|
-
<div
|
|
60
|
-
<div class="category-panel">
|
|
69
|
+
<div style="display: flex; height: 600px;">
|
|
70
|
+
<div style="width: 300px; border-right: 1px solid #ccc;">
|
|
61
71
|
<mj-files-category-tree
|
|
62
72
|
(categorySelected)="selectedCategoryId = $event">
|
|
63
73
|
</mj-files-category-tree>
|
|
64
74
|
</div>
|
|
65
|
-
|
|
66
|
-
<div class="files-panel">
|
|
75
|
+
<div style="flex: 1;">
|
|
67
76
|
<mj-files-grid
|
|
68
77
|
[CategoryID]="selectedCategoryId">
|
|
69
78
|
</mj-files-grid>
|
|
@@ -71,345 +80,193 @@ export class YourModule { }
|
|
|
71
80
|
</div>
|
|
72
81
|
```
|
|
73
82
|
|
|
74
|
-
### File Upload
|
|
83
|
+
### File Upload
|
|
75
84
|
|
|
76
85
|
```html
|
|
77
|
-
<!-- Standalone file upload component -->
|
|
78
86
|
<mj-files-file-upload
|
|
79
87
|
[CategoryID]="selectedCategoryId"
|
|
80
|
-
(uploadStarted)="
|
|
81
|
-
(fileUpload)="
|
|
88
|
+
(uploadStarted)="onUploadStarted()"
|
|
89
|
+
(fileUpload)="onFileUploaded($event)">
|
|
82
90
|
</mj-files-file-upload>
|
|
83
91
|
```
|
|
84
92
|
|
|
85
|
-
###
|
|
93
|
+
### Complete Example
|
|
86
94
|
|
|
87
95
|
```typescript
|
|
88
|
-
import { Component } from '@angular/core';
|
|
89
|
-
import { FileUploadEvent } from '@memberjunction/ng-file-storage';
|
|
90
|
-
import { SharedService } from '@memberjunction/ng-shared';
|
|
96
|
+
import { Component, ViewChild } from '@angular/core';
|
|
97
|
+
import { FilesGridComponent, FileUploadEvent } from '@memberjunction/ng-file-storage';
|
|
91
98
|
|
|
92
99
|
@Component({
|
|
93
100
|
selector: 'app-document-manager',
|
|
94
101
|
template: `
|
|
95
|
-
<h2>Document Manager</h2>
|
|
96
|
-
|
|
97
102
|
<div class="file-manager">
|
|
98
103
|
<div class="categories">
|
|
99
|
-
<h3>Categories</h3>
|
|
100
104
|
<mj-files-category-tree
|
|
101
105
|
(categorySelected)="onCategorySelected($event)">
|
|
102
106
|
</mj-files-category-tree>
|
|
103
107
|
</div>
|
|
104
|
-
|
|
105
108
|
<div class="files">
|
|
106
|
-
<
|
|
107
|
-
|
|
109
|
+
<mj-files-file-upload
|
|
110
|
+
[CategoryID]="selectedCategoryId"
|
|
111
|
+
(fileUpload)="onFileUploaded($event)">
|
|
112
|
+
</mj-files-file-upload>
|
|
113
|
+
<mj-files-grid #filesGrid
|
|
108
114
|
[CategoryID]="selectedCategoryId">
|
|
109
115
|
</mj-files-grid>
|
|
110
116
|
</div>
|
|
111
117
|
</div>
|
|
112
|
-
|
|
113
|
-
styles: [`
|
|
114
|
-
.file-manager {
|
|
115
|
-
display: flex;
|
|
116
|
-
height: 600px;
|
|
117
|
-
}
|
|
118
|
-
.categories {
|
|
119
|
-
width: 300px;
|
|
120
|
-
border-right: 1px solid #ccc;
|
|
121
|
-
padding-right: 20px;
|
|
122
|
-
}
|
|
123
|
-
.files {
|
|
124
|
-
flex: 1;
|
|
125
|
-
padding-left: 20px;
|
|
126
|
-
}
|
|
127
|
-
`]
|
|
118
|
+
`
|
|
128
119
|
})
|
|
129
120
|
export class DocumentManagerComponent {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
onCategorySelected(categoryId?: string) {
|
|
121
|
+
@ViewChild('filesGrid') filesGrid!: FilesGridComponent;
|
|
122
|
+
selectedCategoryId: string | undefined;
|
|
123
|
+
|
|
124
|
+
onCategorySelected(categoryId: string | undefined) {
|
|
136
125
|
this.selectedCategoryId = categoryId;
|
|
137
|
-
// You could load the category name here if needed
|
|
138
126
|
}
|
|
139
|
-
|
|
140
|
-
|
|
127
|
+
|
|
128
|
+
onFileUploaded(event: FileUploadEvent) {
|
|
141
129
|
if (event.success) {
|
|
142
|
-
|
|
143
|
-
`File "${event.file.Name}" uploaded successfully`,
|
|
144
|
-
'success'
|
|
145
|
-
);
|
|
146
|
-
} else {
|
|
147
|
-
this.sharedService.CreateSimpleNotification(
|
|
148
|
-
`Failed to upload file "${event.file.name}"`,
|
|
149
|
-
'error'
|
|
150
|
-
);
|
|
130
|
+
console.log('Uploaded:', event.file.Name);
|
|
151
131
|
}
|
|
152
132
|
}
|
|
133
|
+
|
|
134
|
+
refreshFiles() {
|
|
135
|
+
this.filesGrid.Refresh();
|
|
136
|
+
}
|
|
153
137
|
}
|
|
154
138
|
```
|
|
155
139
|
|
|
156
|
-
##
|
|
140
|
+
## API Reference
|
|
157
141
|
|
|
158
142
|
### CategoryTreeComponent (`mj-files-category-tree`)
|
|
159
143
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
#### Selector
|
|
163
|
-
```typescript
|
|
164
|
-
selector: 'mj-files-category-tree'
|
|
165
|
-
```
|
|
144
|
+
Hierarchical tree view for managing file categories with drag-and-drop reorganization.
|
|
166
145
|
|
|
167
146
|
#### Outputs
|
|
168
147
|
|
|
169
148
|
| Output | Type | Description |
|
|
170
149
|
|--------|------|-------------|
|
|
171
|
-
| `categorySelected` | `EventEmitter<string \| undefined>` | Emitted when a category is selected
|
|
150
|
+
| `categorySelected` | `EventEmitter<string \| undefined>` | Emitted when a category is selected |
|
|
172
151
|
|
|
173
152
|
#### Public Methods
|
|
174
153
|
|
|
175
|
-
| Method | Description |
|
|
176
|
-
|
|
177
|
-
| `createNewCategory()` | Opens dialog to create a
|
|
178
|
-
| `deleteCategory(
|
|
179
|
-
| `handleDrop(e
|
|
180
|
-
| `Refresh()` | Refreshes the category tree
|
|
181
|
-
| `clearSelection()` | Clears the current selection |
|
|
182
|
-
| `saveNewCategory()` | Saves a new category | None | `Promise<void>` |
|
|
183
|
-
| `saveRename()` | Saves category rename | None | `Promise<void>` |
|
|
184
|
-
| `cancelRename()` | Cancels category rename | None | `void` |
|
|
154
|
+
| Method | Description |
|
|
155
|
+
|--------|-------------|
|
|
156
|
+
| `createNewCategory()` | Opens dialog to create a category |
|
|
157
|
+
| `deleteCategory(category)` | Deletes a category with error handling |
|
|
158
|
+
| `handleDrop(e)` | Handles drag-and-drop to move categories |
|
|
159
|
+
| `Refresh()` | Refreshes the category tree |
|
|
160
|
+
| `clearSelection()` | Clears the current selection |
|
|
185
161
|
|
|
186
162
|
### FilesGridComponent (`mj-files-grid`)
|
|
187
163
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
#### Selector
|
|
191
|
-
```typescript
|
|
192
|
-
selector: 'mj-files-grid'
|
|
193
|
-
```
|
|
164
|
+
Kendo Grid for displaying and managing files with inline editing.
|
|
194
165
|
|
|
195
166
|
#### Inputs
|
|
196
167
|
|
|
197
|
-
| Input | Type |
|
|
198
|
-
|
|
199
|
-
| `CategoryID` | `string \| undefined` |
|
|
168
|
+
| Input | Type | Default | Description |
|
|
169
|
+
|-------|------|---------|-------------|
|
|
170
|
+
| `CategoryID` | `string \| undefined` | `undefined` | Category ID to filter files by |
|
|
200
171
|
|
|
201
172
|
#### Public Methods
|
|
202
173
|
|
|
203
|
-
| Method | Description |
|
|
204
|
-
|
|
205
|
-
| `downloadFile(file
|
|
206
|
-
| `deleteFile(file
|
|
207
|
-
| `saveEditFile()` | Saves changes to file metadata |
|
|
208
|
-
| `resetEditFile()` | Cancels
|
|
209
|
-
| `
|
|
210
|
-
| `
|
|
211
|
-
| `Refresh()` | Refreshes the files grid data | None | `Promise<void>` |
|
|
174
|
+
| Method | Description |
|
|
175
|
+
|--------|-------------|
|
|
176
|
+
| `downloadFile(file)` | Downloads file via provider's signed URL |
|
|
177
|
+
| `deleteFile(file)` | Deletes file with confirmation |
|
|
178
|
+
| `saveEditFile()` | Saves changes to file metadata |
|
|
179
|
+
| `resetEditFile()` | Cancels metadata editing |
|
|
180
|
+
| `canBeDeleted(file)` | Checks if file can be deleted |
|
|
181
|
+
| `Refresh()` | Refreshes the files grid |
|
|
212
182
|
|
|
213
183
|
### FileUploadComponent (`mj-files-file-upload`)
|
|
214
184
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
#### Selector
|
|
218
|
-
```typescript
|
|
219
|
-
selector: 'mj-files-file-upload'
|
|
220
|
-
```
|
|
185
|
+
File upload component with storage provider integration and overwrite protection.
|
|
221
186
|
|
|
222
187
|
#### Inputs
|
|
223
188
|
|
|
224
|
-
| Input | Type |
|
|
225
|
-
|
|
226
|
-
| `disabled` | `boolean` |
|
|
227
|
-
| `CategoryID` | `string \| undefined` |
|
|
189
|
+
| Input | Type | Default | Description |
|
|
190
|
+
|-------|------|---------|-------------|
|
|
191
|
+
| `disabled` | `boolean` | `false` | Disable the upload component |
|
|
192
|
+
| `CategoryID` | `string \| undefined` | `undefined` | Category ID for uploaded files |
|
|
228
193
|
|
|
229
194
|
#### Outputs
|
|
230
195
|
|
|
231
196
|
| Output | Type | Description |
|
|
232
197
|
|--------|------|-------------|
|
|
233
|
-
| `uploadStarted` | `EventEmitter<void>` | Emitted when
|
|
234
|
-
| `fileUpload` | `EventEmitter<FileUploadEvent>` | Emitted
|
|
235
|
-
|
|
236
|
-
#### Public Methods
|
|
237
|
-
|
|
238
|
-
| Method | Description | Parameters | Returns |
|
|
239
|
-
|--------|-------------|------------|----------|
|
|
240
|
-
| `Confirm()` | Confirms file overwrite and proceeds with upload | None | `void` |
|
|
241
|
-
| `CancelConfirm()` | Cancels file overwrite and deletes pending record | None | `Promise<void>` |
|
|
242
|
-
| `Refresh()` | Loads default file storage provider | None | `Promise<void>` |
|
|
243
|
-
| `SelectEventHandler(e: SelectEvent)` | Handles file selection | `e: SelectEvent` | `Promise<void>` |
|
|
198
|
+
| `uploadStarted` | `EventEmitter<void>` | Emitted when upload begins |
|
|
199
|
+
| `fileUpload` | `EventEmitter<FileUploadEvent>` | Emitted on upload completion |
|
|
244
200
|
|
|
245
201
|
#### Properties
|
|
246
202
|
|
|
247
203
|
| Property | Type | Description |
|
|
248
204
|
|----------|------|-------------|
|
|
249
|
-
| `IsUploading` | `boolean` |
|
|
205
|
+
| `IsUploading` | `boolean` | Whether files are currently uploading |
|
|
250
206
|
|
|
251
207
|
## Types
|
|
252
208
|
|
|
253
209
|
### FileUploadEvent
|
|
254
210
|
|
|
255
211
|
```typescript
|
|
256
|
-
|
|
212
|
+
type FileUploadEvent =
|
|
257
213
|
| { success: true; file: FileEntity }
|
|
258
214
|
| { success: false; file: FileInfo };
|
|
259
215
|
```
|
|
260
216
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
## File Upload Flow
|
|
264
|
-
|
|
265
|
-
1. User selects a file using the file upload component
|
|
266
|
-
2. Component creates a preliminary file record in the MemberJunction system
|
|
267
|
-
3. If a file with the same name exists, a confirmation dialog is shown
|
|
268
|
-
4. On confirmation, the file is uploaded to the storage provider
|
|
269
|
-
5. After successful upload, the file record status is updated to "Uploaded"
|
|
270
|
-
6. The component emits a fileUpload event with success status and file details
|
|
271
|
-
|
|
272
|
-
## Styling
|
|
273
|
-
|
|
274
|
-
The components use Kendo UI components for consistent styling and include basic CSS that can be overridden in your application.
|
|
275
|
-
|
|
276
|
-
## Advanced Usage
|
|
277
|
-
|
|
278
|
-
### Custom File Grid with Actions
|
|
279
|
-
|
|
280
|
-
```typescript
|
|
281
|
-
import { Component, ViewChild } from '@angular/core';
|
|
282
|
-
import { FilesGridComponent, FileUploadEvent } from '@memberjunction/ng-file-storage';
|
|
283
|
-
import { FileEntity } from '@memberjunction/core-entities';
|
|
284
|
-
|
|
285
|
-
@Component({
|
|
286
|
-
template: `
|
|
287
|
-
<div class="file-manager">
|
|
288
|
-
<div class="toolbar">
|
|
289
|
-
<button (click)="refreshFiles()">Refresh</button>
|
|
290
|
-
<mj-files-file-upload
|
|
291
|
-
[CategoryID]="categoryId"
|
|
292
|
-
(fileUpload)="onFileUploaded($event)">
|
|
293
|
-
</mj-files-file-upload>
|
|
294
|
-
</div>
|
|
295
|
-
|
|
296
|
-
<mj-files-grid #filesGrid
|
|
297
|
-
[CategoryID]="categoryId">
|
|
298
|
-
</mj-files-grid>
|
|
299
|
-
</div>
|
|
300
|
-
`
|
|
301
|
-
})
|
|
302
|
-
export class CustomFileManagerComponent {
|
|
303
|
-
@ViewChild('filesGrid') filesGrid!: FilesGridComponent;
|
|
304
|
-
categoryId = 'some-category-id';
|
|
305
|
-
|
|
306
|
-
refreshFiles() {
|
|
307
|
-
this.filesGrid.Refresh();
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
onFileUploaded(event: FileUploadEvent) {
|
|
311
|
-
if (event.success) {
|
|
312
|
-
console.log('File uploaded:', event.file.Name);
|
|
313
|
-
// The grid automatically adds the file, no refresh needed
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
### Programmatic Category Management
|
|
217
|
+
## Upload Flow
|
|
320
218
|
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
@Component({
|
|
328
|
-
template: `
|
|
329
|
-
<mj-files-category-tree #categoryTree
|
|
330
|
-
(categorySelected)="onCategorySelected($event)">
|
|
331
|
-
</mj-files-category-tree>
|
|
332
|
-
`
|
|
333
|
-
})
|
|
334
|
-
export class CategoryManagerComponent {
|
|
335
|
-
@ViewChild('categoryTree') categoryTree!: CategoryTreeComponent;
|
|
336
|
-
|
|
337
|
-
async createCategoryProgrammatically(name: string, parentId?: string) {
|
|
338
|
-
const md = new Metadata();
|
|
339
|
-
const category = await md.GetEntityObject<FileCategoryEntity>('File Categories');
|
|
340
|
-
category.NewRecord();
|
|
341
|
-
category.Name = name;
|
|
342
|
-
category.ParentID = parentId;
|
|
343
|
-
|
|
344
|
-
if (await category.Save()) {
|
|
345
|
-
// Refresh the tree to show new category
|
|
346
|
-
await this.categoryTree.Refresh();
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
onCategorySelected(categoryId?: string) {
|
|
351
|
-
console.log('Selected category:', categoryId);
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
```
|
|
219
|
+
1. User selects a file through the upload component
|
|
220
|
+
2. A preliminary file record is created in the MemberJunction system
|
|
221
|
+
3. If a file with the same name exists, a confirmation dialog appears
|
|
222
|
+
4. On confirmation, the file uploads to the active storage provider
|
|
223
|
+
5. The file record status updates to "Uploaded"
|
|
224
|
+
6. The `fileUpload` event emits with success status and file details
|
|
355
225
|
|
|
356
|
-
##
|
|
226
|
+
## Key Behaviors
|
|
357
227
|
|
|
358
|
-
|
|
359
|
-
-
|
|
360
|
-
-
|
|
361
|
-
-
|
|
228
|
+
- **File deletion** is restricted based on upload status and age (10 minutes for pending files)
|
|
229
|
+
- **Overwrite protection** prompts users before replacing existing files
|
|
230
|
+
- **Download** uses provider-specific signed URLs for security
|
|
231
|
+
- **Category drag-and-drop** supports reorganizing the hierarchy
|
|
232
|
+
- All operations include loading state indicators
|
|
362
233
|
|
|
363
234
|
## Dependencies
|
|
364
235
|
|
|
365
|
-
###
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
236
|
+
### Runtime Dependencies
|
|
237
|
+
|
|
238
|
+
| Package | Description |
|
|
239
|
+
|---------|-------------|
|
|
240
|
+
| `@memberjunction/core` | Core metadata and entity access |
|
|
241
|
+
| `@memberjunction/core-entities` | File-related entity types |
|
|
242
|
+
| `@memberjunction/global` | Global utilities |
|
|
243
|
+
| `@memberjunction/graphql-dataprovider` | GraphQL data operations |
|
|
244
|
+
| `@memberjunction/ng-container-directives` | Container directives |
|
|
245
|
+
| `@memberjunction/ng-shared` | Shared Angular services |
|
|
246
|
+
| `@memberjunction/ng-shared-generic` | Shared generic components |
|
|
247
|
+
| `@progress/kendo-angular-grid` | Data grid |
|
|
248
|
+
| `@progress/kendo-angular-treeview` | Category tree |
|
|
249
|
+
| `@progress/kendo-angular-upload` | File upload |
|
|
250
|
+
| `@progress/kendo-angular-dialog` | Confirmation dialogs |
|
|
251
|
+
| `@progress/kendo-angular-buttons` | Button components |
|
|
252
|
+
| `@progress/kendo-angular-dropdowns` | Dropdown components |
|
|
253
|
+
| `@progress/kendo-angular-indicators` | Loading indicators |
|
|
254
|
+
| `@progress/kendo-angular-menu` | Context menu |
|
|
255
|
+
|
|
256
|
+
### Peer Dependencies
|
|
257
|
+
|
|
258
|
+
- `@angular/common` ^21.x
|
|
259
|
+
- `@angular/core` ^21.x
|
|
260
|
+
- `@angular/forms` ^21.x
|
|
261
|
+
- `@angular/router` ^21.x
|
|
262
|
+
|
|
263
|
+
## Build
|
|
264
|
+
|
|
390
265
|
```bash
|
|
391
266
|
cd packages/Angular/Generic/file-storage
|
|
392
267
|
npm run build
|
|
393
268
|
```
|
|
394
269
|
|
|
395
|
-
|
|
396
|
-
```bash
|
|
397
|
-
npm run watch
|
|
398
|
-
```
|
|
399
|
-
|
|
400
|
-
### Integration with MemberJunction
|
|
401
|
-
|
|
402
|
-
This package integrates with:
|
|
403
|
-
- **File Storage Providers**: Automatically uses the highest priority active provider
|
|
404
|
-
- **GraphQL API**: Uses MemberJunction's GraphQL layer for all operations
|
|
405
|
-
- **Entity Framework**: Leverages MemberJunction's entity system for type safety
|
|
406
|
-
- **Permissions**: Respects entity-level permissions for Files and File Categories
|
|
407
|
-
|
|
408
|
-
## Notes
|
|
270
|
+
## License
|
|
409
271
|
|
|
410
|
-
|
|
411
|
-
- The component automatically handles file overwrite scenarios with user confirmation
|
|
412
|
-
- All file operations are tracked with status updates (Pending → Uploaded)
|
|
413
|
-
- File download uses provider-specific signed URLs for security
|
|
414
|
-
- Category operations support drag-and-drop reorganization
|
|
415
|
-
- Components include loading states for all async operations
|
|
272
|
+
ISC
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-file-storage",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "MemberJunction: Angular components for managing files, and related components.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@angular/platform-browser": "21.1.3",
|
|
30
|
-
"@memberjunction/core": "4.
|
|
31
|
-
"@memberjunction/core-entities": "4.
|
|
32
|
-
"@memberjunction/global": "4.
|
|
33
|
-
"@memberjunction/graphql-dataprovider": "4.
|
|
34
|
-
"@memberjunction/ng-container-directives": "4.
|
|
35
|
-
"@memberjunction/ng-shared": "4.
|
|
36
|
-
"@memberjunction/ng-shared-generic": "4.
|
|
30
|
+
"@memberjunction/core": "4.2.0",
|
|
31
|
+
"@memberjunction/core-entities": "4.2.0",
|
|
32
|
+
"@memberjunction/global": "4.2.0",
|
|
33
|
+
"@memberjunction/graphql-dataprovider": "4.2.0",
|
|
34
|
+
"@memberjunction/ng-container-directives": "4.2.0",
|
|
35
|
+
"@memberjunction/ng-shared": "4.2.0",
|
|
36
|
+
"@memberjunction/ng-shared-generic": "4.2.0",
|
|
37
37
|
"@progress/kendo-angular-buttons": "22.0.1",
|
|
38
38
|
"@progress/kendo-angular-dialog": "22.0.1",
|
|
39
39
|
"@progress/kendo-angular-dropdowns": "22.0.1",
|