@memberjunction/ng-file-storage 1.2.2 → 1.3.0

package/dist/lib/file-upload/file-upload.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { FileEntity } from '@memberjunction/core-entities';
 import { FileInfo, SelectEvent } from '@progress/kendo-angular-upload';
+import { z } from 'zod';
 import * as i0 from "@angular/core";
 export type FileUploadEvent = {
     success: true;
@@ -9,10 +10,132 @@ export type FileUploadEvent = {
     success: false;
     file: FileInfo;
 };
+declare const FileUploadMutationSchema: z.ZodObject<{
+    CreateFile: z.ZodObject<{
+        NameExists: z.ZodBoolean;
+        UploadUrl: z.ZodString;
+        File: z.ZodObject<{
+            Category: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            CategoryID: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            ContentType: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            CreatedAt: z.ZodNumber;
+            Description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            ID: z.ZodNumber;
+            Name: z.ZodString;
+            Provider: z.ZodString;
+            ProviderID: z.ZodNumber;
+            ProviderKey: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            Status: z.ZodString;
+            UpdatedAt: z.ZodNumber;
+        }, "strip", z.ZodTypeAny, {
+            ID: number;
+            Name: string;
+            CreatedAt: number;
+            Provider: string;
+            ProviderID: number;
+            Status: string;
+            UpdatedAt: number;
+            Category?: string | null | undefined;
+            CategoryID?: number | null | undefined;
+            ContentType?: string | null | undefined;
+            Description?: string | null | undefined;
+            ProviderKey?: string | null | undefined;
+        }, {
+            ID: number;
+            Name: string;
+            CreatedAt: number;
+            Provider: string;
+            ProviderID: number;
+            Status: string;
+            UpdatedAt: number;
+            Category?: string | null | undefined;
+            CategoryID?: number | null | undefined;
+            ContentType?: string | null | undefined;
+            Description?: string | null | undefined;
+            ProviderKey?: string | null | undefined;
+        }>;
+    }, "strip", z.ZodTypeAny, {
+        NameExists: boolean;
+        UploadUrl: string;
+        File: {
+            ID: number;
+            Name: string;
+            CreatedAt: number;
+            Provider: string;
+            ProviderID: number;
+            Status: string;
+            UpdatedAt: number;
+            Category?: string | null | undefined;
+            CategoryID?: number | null | undefined;
+            ContentType?: string | null | undefined;
+            Description?: string | null | undefined;
+            ProviderKey?: string | null | undefined;
+        };
+    }, {
+        NameExists: boolean;
+        UploadUrl: string;
+        File: {
+            ID: number;
+            Name: string;
+            CreatedAt: number;
+            Provider: string;
+            ProviderID: number;
+            Status: string;
+            UpdatedAt: number;
+            Category?: string | null | undefined;
+            CategoryID?: number | null | undefined;
+            ContentType?: string | null | undefined;
+            Description?: string | null | undefined;
+            ProviderKey?: string | null | undefined;
+        };
+    }>;
+}, "strip", z.ZodTypeAny, {
+    CreateFile: {
+        NameExists: boolean;
+        UploadUrl: string;
+        File: {
+            ID: number;
+            Name: string;
+            CreatedAt: number;
+            Provider: string;
+            ProviderID: number;
+            Status: string;
+            UpdatedAt: number;
+            Category?: string | null | undefined;
+            CategoryID?: number | null | undefined;
+            ContentType?: string | null | undefined;
+            Description?: string | null | undefined;
+            ProviderKey?: string | null | undefined;
+        };
+    };
+}, {
+    CreateFile: {
+        NameExists: boolean;
+        UploadUrl: string;
+        File: {
+            ID: number;
+            Name: string;
+            CreatedAt: number;
+            Provider: string;
+            ProviderID: number;
+            Status: string;
+            UpdatedAt: number;
+            Category?: string | null | undefined;
+            CategoryID?: number | null | undefined;
+            ContentType?: string | null | undefined;
+            Description?: string | null | undefined;
+            ProviderKey?: string | null | undefined;
+        };
+    };
+}>;
+type ApiFile = z.infer<typeof FileUploadMutationSchema>['CreateFile']['File'];
+type UploadTuple = [FileInfo, ApiFile, string];
 export declare class FileUploadComponent implements OnInit {
-    isUploading: boolean;
+    ConfirmQueue: Array<UploadTuple>;
+    UploadQueue: Array<FileInfo>;
     private defaultProviderID;
     private md;
+    get IsUploading(): boolean;
     constructor();
     disabled: boolean;
     CategoryID: number | undefined;
@@ -20,8 +143,13 @@ export declare class FileUploadComponent implements OnInit {
     fileUpload: EventEmitter<FileUploadEvent>;
     ngOnInit(): void;
     Refresh(): Promise<void>;
-    selectEventHandler(e: SelectEvent): Promise<void>;
+    Confirm(): void;
+    CancelConfirm(): Promise<void>;
+    SelectEventHandler(e: SelectEvent): Promise<void>;
+    private _processUploadQueue;
+    private _uploadFile;
     static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FileUploadComponent, "mj-files-file-upload", never, { "disabled": { "alias": "disabled"; "required": false; }; "CategoryID": { "alias": "CategoryID"; "required": false; }; }, { "uploadStarted": "uploadStarted"; "fileUpload": "fileUpload"; }, never, never, false, never>;
 }
+export {};
 //# sourceMappingURL=file-upload.d.ts.map

package/dist/lib/file-upload/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/lib/file-upload/file-upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAS,MAAM,EAAU,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,UAAU,EAA6B,MAAM,+BAA+B,CAAC;AAGtF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;;AAGvE,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,GAAG;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAmDvG,qBAKa,mBAAoB,YAAW,MAAM;IACzC,WAAW,UAAS;IAC3B,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,EAAE,CAAkB;;IAInB,QAAQ,UAAS;IACjB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAa;IAC1C,aAAa,qBAA4B;IACzC,UAAU,gCAAuC;IAE3D,QAAQ,IAAI,IAAI;IAIV,OAAO;IASP,kBAAkB,CAAC,CAAC,EAAE,WAAW;yCAzB5B,mBAAmB;2CAAnB,mBAAmB;CA2E/B"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/lib/file-upload/file-upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAS,MAAM,EAAU,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,UAAU,EAA6B,MAAM,+BAA+B,CAAC;AAGtF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;;AAExB,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,GAAG;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAgCvG,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB5B,CAAC;AAEH,KAAK,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,wBAAwB,CAAC,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9E,KAAK,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAE/C,qBAKa,mBAAoB,YAAW,MAAM;IACzC,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,CAAM;IACtC,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAM;IACzC,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,EAAE,CAAkB;IAE5B,IAAI,WAAW,IAAI,OAAO,CAEzB;;IAIQ,QAAQ,UAAS;IACjB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAa;IAC1C,aAAa,qBAA4B;IACzC,UAAU,gCAAuC;IAE3D,QAAQ,IAAI,IAAI;IAIV,OAAO;IASb,OAAO;IAOD,aAAa;IAab,kBAAkB,CAAC,CAAC,EAAE,WAAW;YAQzB,mBAAmB;YAkCnB,WAAW;yCA5Fd,mBAAmB;2CAAnB,mBAAmB;CAoH/B"}

package/dist/lib/file-upload/file-upload.js

@@ -12,7 +12,31 @@ import { Metadata, RunView } from '@memberjunction/core';
 import { GraphQLDataProvider, gql } from '@memberjunction/graphql-dataprovider';
 import { z } from 'zod';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-upload";
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-dialog";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@progress/kendo-angular-upload";
+function FileUploadComponent_kendo_dialog_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 2);
+    i0.ɵɵlistener("close", function FileUploadComponent_kendo_dialog_2_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelConfirm()); });
+    i0.ɵɵelementStart(1, "p", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 4);
+    i0.ɵɵlistener("click", function FileUploadComponent_kendo_dialog_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.CancelConfirm()); });
+    i0.ɵɵtext(5, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 5);
+    i0.ɵɵlistener("click", function FileUploadComponent_kendo_dialog_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r2); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.Confirm()); });
+    i0.ɵɵtext(7, "Overwrite");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("minWidth", 250)("width", 450);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" This will overwrite an existing file named '", ctx_r0.ConfirmQueue[0][0].name, "'. Are you sure you want to continue? ");
+} }
 const FileFieldsFragment = gql `
   fragment FileFields on File_ {
     Category
@@ -33,6 +57,7 @@ const FileUploadMutation = gql `
   ${FileFieldsFragment}
   mutation CreateFile($input: CreateFileInput!) {
     CreateFile(input: $input) {
+      NameExists
       UploadUrl
       File {
         ...FileFields
@@ -42,6 +67,7 @@ const FileUploadMutation = gql `
 `;
 const FileUploadMutationSchema = z.object({
     CreateFile: z.object({
+        NameExists: z.boolean(),
         UploadUrl: z.string(),
         File: z.object({
             Category: z.string().nullish(),
@@ -60,8 +86,12 @@ const FileUploadMutationSchema = z.object({
     }),
 });
 export class FileUploadComponent {
+    get IsUploading() {
+        return this.UploadQueue.length + this.ConfirmQueue.length > 0;
+    }
     constructor() {
-        this.isUploading = false;
+        this.ConfirmQueue = [];
+        this.UploadQueue = [];
         this.defaultProviderID = -1;
         this.md = new Metadata();
         this.disabled = false;
@@ -82,13 +112,37 @@ export class FileUploadComponent {
             }
         });
     }
-    selectEventHandler(e) {
+    Confirm() {
+        const confirmed = this.ConfirmQueue.shift();
+        if (confirmed) {
+            this._uploadFile(...confirmed);
+        }
+    }
+    CancelConfirm() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cancelled = this.ConfirmQueue.shift();
+            if (cancelled) {
+                const [file, fileRecord] = cancelled;
+                const fileEntity = yield this.md.GetEntityObject('Files');
+                yield fileEntity.LoadFromData(fileRecord);
+                yield fileEntity.Delete();
+                this.fileUpload.emit({ success: false, file });
+            }
+        });
+    }
+    SelectEventHandler(e) {
         return __awaiter(this, void 0, void 0, function* () {
             e.preventDefault();
-            this.isUploading = true;
             this.uploadStarted.emit();
+            this.UploadQueue = e.files;
+            this._processUploadQueue();
+        });
+    }
+    _processUploadQueue() {
+        return __awaiter(this, void 0, void 0, function* () {
             // for each selected file to upload
-            for (const file of e.files) {
+            let file = this.UploadQueue.shift();
+            while (file) {
                 const input = {
                     Name: file.name,
                     ProviderID: this.defaultProviderID,
@@ -100,49 +154,66 @@ export class FileUploadComponent {
                 // make sure the response is correct
                 const parsedResult = FileUploadMutationSchema.safeParse(result);
                 if (parsedResult.success) {
-                    const { File, UploadUrl } = parsedResult.data.CreateFile;
-                    try {
-                        // now upload to the url
-                        yield window.fetch(UploadUrl, {
-                            method: 'PUT',
-                            headers: { 'x-ms-blob-type': 'BlockBlob' },
-                            body: file.rawFile,
-                        });
-                        // now update that file to set status
-                        const fileEntity = yield this.md.GetEntityObject('Files');
-                        yield fileEntity.LoadFromData(File);
-                        fileEntity.Status = 'Uploaded';
-                        yield fileEntity.Save();
-                        // emit an event about a new file uploaded, include the file data
-                        this.fileUpload.emit({ success: true, file: fileEntity });
-                        // Could also emit a progress event with each iteration
+                    const { File, UploadUrl, NameExists } = parsedResult.data.CreateFile;
+                    const uploadTuple = [file, File, UploadUrl];
+                    // Confirm we want to overwrite
+                    if (NameExists) {
+                        this.ConfirmQueue.push(uploadTuple);
                     }
-                    catch (e) {
-                        console.error(e);
-                        // something failed when actually uploading or when updating the API, what do to about pending file?
-                        this.fileUpload.emit({ success: false, file });
+                    else {
+                        yield this._uploadFile(...uploadTuple);
                     }
                 }
                 else {
                     console.error('The API returned an unexpected result', parsedResult.error);
                     this.fileUpload.emit({ success: false, file });
                 }
+                file = this.UploadQueue.shift();
+            }
+        });
+    }
+    _uploadFile(file, fileRecord, uploadUrl) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                // now upload to the url
+                yield window.fetch(uploadUrl, {
+                    method: 'PUT',
+                    headers: { 'x-ms-blob-type': 'BlockBlob' },
+                    body: file.rawFile,
+                });
+                // now update that file to set status
+                const fileEntity = yield this.md.GetEntityObject('Files');
+                yield fileEntity.LoadFromData(fileRecord);
+                fileEntity.Status = 'Uploaded';
+                yield fileEntity.Save();
+                // emit an event about a new file uploaded, include the file data
+                this.fileUpload.emit({ success: true, file: fileEntity });
+                // Could also emit a progress event with each iteration
+            }
+            catch (e) {
+                console.error(e);
+                // something failed when actually uploading or when updating the API, what do to about pending file?
+                this.fileUpload.emit({ success: false, file });
             }
-            this.isUploading = false;
         });
     }
 }
 FileUploadComponent.ɵfac = function FileUploadComponent_Factory(t) { return new (t || FileUploadComponent)(); };
-FileUploadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileUploadComponent, selectors: [["mj-files-file-upload"]], inputs: { disabled: "disabled", CategoryID: "CategoryID" }, outputs: { uploadStarted: "uploadStarted", fileUpload: "fileUpload" }, decls: 1, vars: 2, consts: [[3, "disabled", "multiple", "select"]], template: function FileUploadComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "kendo-fileselect", 0);
-        i0.ɵɵlistener("select", function FileUploadComponent_Template_kendo_fileselect_select_0_listener($event) { return ctx.selectEventHandler($event); });
+FileUploadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileUploadComponent, selectors: [["mj-files-file-upload"]], inputs: { disabled: "disabled", CategoryID: "CategoryID" }, outputs: { uploadStarted: "uploadStarted", fileUpload: "fileUpload" }, decls: 3, vars: 3, consts: [[3, "disabled", "multiple", "select"], ["title", "Please confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Please confirm", 3, "minWidth", "width", "close"], [2, "margin", "30px", "text-align", "center"], ["kendoButton", "", 3, "click"], ["kendoButton", "", "themeColor", "primary", 3, "click"]], template: function FileUploadComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div")(1, "kendo-fileselect", 0);
+        i0.ɵɵlistener("select", function FileUploadComponent_Template_kendo_fileselect_select_1_listener($event) { return ctx.SelectEventHandler($event); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(2, FileUploadComponent_kendo_dialog_2_Template, 8, 3, "kendo-dialog", 1);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("disabled", ctx.isUploading || ctx.disabled)("multiple", false);
-    } }, dependencies: [i1.FileSelectComponent] });
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("disabled", ctx.IsUploading || ctx.disabled)("multiple", false);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.ConfirmQueue.length > 0);
+    } }, dependencies: [i1.NgIf, i2.DialogComponent, i2.DialogActionsComponent, i3.ButtonComponent, i4.FileSelectComponent] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileUploadComponent, [{
         type: Component,
-        args: [{ selector: 'mj-files-file-upload', template: "<kendo-fileselect [disabled]=\"isUploading || disabled\" [multiple]=\"false\" (select)=\"selectEventHandler($event)\"></kendo-fileselect>\n" }]
+        args: [{ selector: 'mj-files-file-upload', template: "<div>\n  <kendo-fileselect [disabled]=\"IsUploading || disabled\" [multiple]=\"false\" (select)=\"SelectEventHandler($event)\"> </kendo-fileselect>\n  <kendo-dialog title=\"Please confirm\" *ngIf=\"ConfirmQueue.length > 0\" (close)=\"CancelConfirm()\" [minWidth]=\"250\" [width]=\"450\">\n    <p style=\"margin: 30px; text-align: center\">\n      This will overwrite an existing file named '{{ConfirmQueue[0][0].name}}'. Are you sure you want to continue?\n    </p>\n    <kendo-dialog-actions>\n      <button kendoButton (click)=\"CancelConfirm()\">Cancel</button>\n      <button kendoButton (click)=\"Confirm()\" themeColor=\"primary\">Overwrite</button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n</div>\n" }]
     }], () => [], { disabled: [{
             type: Input
         }], CategoryID: [{
@@ -152,4 +223,4 @@ FileUploadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileUpl
         }], fileUpload: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FileUploadComponent, { className: "FileUploadComponent", filePath: "src/lib/file-upload/file-upload.ts", lineNumber: 65 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FileUploadComponent, { className: "FileUploadComponent", filePath: "src/lib/file-upload/file-upload.ts", lineNumber: 70 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-file-storage",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "MemberJunction: Angular components for managing files, and related components.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -26,11 +26,11 @@
     "@angular/router": "~17.2.2"
   },
   "dependencies": {
-    "@memberjunction/core": "~1.2.2",
-    "@memberjunction/core-entities": "~1.2.2",
-    "@memberjunction/global": "~1.2.2",
-    "@memberjunction/ng-container-directives": "~1.2.2",
-    "@memberjunction/ng-shared": "~1.2.2",
+    "@memberjunction/core": "~1.3.0",
+    "@memberjunction/core-entities": "~1.3.0",
+    "@memberjunction/global": "~1.3.0",
+    "@memberjunction/ng-container-directives": "~1.3.0",
+    "@memberjunction/ng-shared": "~1.3.0",
     "@progress/kendo-angular-buttons": "~15.1.0",
     "@progress/kendo-angular-dialog": "~15.1.0",
     "@progress/kendo-angular-dropdowns": "~15.1.0",