mmhglobal-dynamicform 2.26.0 → 2.27.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 +5 -1
- package/esm2020/lib/zupload/zupload.component.mjs +104 -62
- package/fesm2015/mmhglobal-dynamicform.mjs +103 -61
- package/fesm2015/mmhglobal-dynamicform.mjs.map +1 -1
- package/fesm2020/mmhglobal-dynamicform.mjs +103 -61
- package/fesm2020/mmhglobal-dynamicform.mjs.map +1 -1
- package/lib/zupload/zupload.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -8272,7 +8272,7 @@ class ZuploadComponent extends InputFieldBase {
|
|
|
8272
8272
|
// DivClass: "col-md-12 col-md-6",
|
|
8273
8273
|
// Visible: true
|
|
8274
8274
|
// }];
|
|
8275
|
-
constructor(componentService, authService, compressImage, zcoreService, ngZone, sharePointService) {
|
|
8275
|
+
constructor(componentService, authService, compressImage, zcoreService, ngZone, sharePointService, alertService) {
|
|
8276
8276
|
super(componentService);
|
|
8277
8277
|
this.componentService = componentService;
|
|
8278
8278
|
this.authService = authService;
|
|
@@ -8280,6 +8280,7 @@ class ZuploadComponent extends InputFieldBase {
|
|
|
8280
8280
|
this.zcoreService = zcoreService;
|
|
8281
8281
|
this.ngZone = ngZone;
|
|
8282
8282
|
this.sharePointService = sharePointService;
|
|
8283
|
+
this.alertService = alertService;
|
|
8283
8284
|
this.uploadAttachmentUrl = null;
|
|
8284
8285
|
this.uploadSaveUrl = "/Attachment/Chunk_Upload_Save"; // should represent an actual API endpoint
|
|
8285
8286
|
this.uploadRemoveUrl = "/Attachment/Chunk_Upload_Remove"; // should represent an actual API endpoint
|
|
@@ -8340,6 +8341,9 @@ class ZuploadComponent extends InputFieldBase {
|
|
|
8340
8341
|
if (this.data.Multiple) {
|
|
8341
8342
|
this.isMultiple = this.data.Multiple;
|
|
8342
8343
|
}
|
|
8344
|
+
if (this.data.AllowedFileExtension) {
|
|
8345
|
+
this.restrictions.allowedExtensions = this.restrictions.allowedExtensions.concat(this.data.AllowedFileExtension);
|
|
8346
|
+
}
|
|
8343
8347
|
this.componentProperties.style.style6 = this.componentProperties.style.style6 || "margin: 5px; border: 1px solid gray;";
|
|
8344
8348
|
}
|
|
8345
8349
|
onSuccess(e) {
|
|
@@ -8435,18 +8439,24 @@ class ZuploadComponent extends InputFieldBase {
|
|
|
8435
8439
|
// Image Preview
|
|
8436
8440
|
const me = this;
|
|
8437
8441
|
e.files.forEach((file) => {
|
|
8438
|
-
if (
|
|
8439
|
-
|
|
8440
|
-
|
|
8441
|
-
|
|
8442
|
-
|
|
8443
|
-
|
|
8444
|
-
|
|
8445
|
-
|
|
8442
|
+
if (!me.isValidUploadedFile(me, file)) {
|
|
8443
|
+
e.preventDefault();
|
|
8444
|
+
return;
|
|
8445
|
+
}
|
|
8446
|
+
else {
|
|
8447
|
+
if (file.rawFile && file.rawFile.type.includes("image")) {
|
|
8448
|
+
if (!file.validationErrors) {
|
|
8449
|
+
const reader = new FileReader();
|
|
8450
|
+
reader.onload = function (ev) {
|
|
8451
|
+
if (me.data.EnableImagePreview) {
|
|
8452
|
+
if (!me.uid.includes(file.uid)) {
|
|
8453
|
+
me.uid.push(file.uid);
|
|
8454
|
+
me.imagePreviews.push(Object.assign(Object.assign({}, file), { src: reader.result }));
|
|
8455
|
+
}
|
|
8446
8456
|
}
|
|
8447
|
-
}
|
|
8448
|
-
|
|
8449
|
-
|
|
8457
|
+
};
|
|
8458
|
+
reader.readAsDataURL(file.rawFile);
|
|
8459
|
+
}
|
|
8450
8460
|
}
|
|
8451
8461
|
}
|
|
8452
8462
|
});
|
|
@@ -8510,38 +8520,60 @@ class ZuploadComponent extends InputFieldBase {
|
|
|
8510
8520
|
});
|
|
8511
8521
|
}
|
|
8512
8522
|
}
|
|
8523
|
+
isValidUploadedFile(me, file) {
|
|
8524
|
+
const fileSize = file.rawFile.size;
|
|
8525
|
+
const fileExtension = file.rawFile.name.split('.').pop().toLowerCase();
|
|
8526
|
+
// Check if file size and extension are valid
|
|
8527
|
+
if (fileSize > me.restrictions.maxFileSize || !me.restrictions.allowedExtensions.includes(fileExtension)) {
|
|
8528
|
+
let errorMessage = 'Error: ';
|
|
8529
|
+
if (!me.restrictions.allowedExtensions.includes(fileExtension)) {
|
|
8530
|
+
errorMessage = `Invalid file type. Allowed types are: ${me.restrictions.allowedExtensions.join(', ')}.`;
|
|
8531
|
+
}
|
|
8532
|
+
else if (fileSize > me.restrictions.maxFileSize) {
|
|
8533
|
+
errorMessage = `File size cannot exceeds ${me.formatFileSize(me.restrictions.maxFileSize)}.`;
|
|
8534
|
+
}
|
|
8535
|
+
me.alertService.showOkay('Failed to upload', errorMessage, ['col-4']);
|
|
8536
|
+
return false;
|
|
8537
|
+
}
|
|
8538
|
+
return true;
|
|
8539
|
+
}
|
|
8513
8540
|
selectEventHandler(e) {
|
|
8514
8541
|
const me = this;
|
|
8515
|
-
|
|
8542
|
+
//#region sharepoint
|
|
8516
8543
|
const attachmentInfo = this.sharePointService.getAttachmentInfo(this.data["DownloadFileConfig"]);
|
|
8517
|
-
//
|
|
8544
|
+
// Change uploadSaveUrl if saving to SharePoint
|
|
8518
8545
|
if (attachmentInfo && attachmentInfo.isSaveToSharePoint && attachmentInfo.siteName) {
|
|
8519
8546
|
const attachmentSourceUrl = this.zcoreService.getEnvironment().attachmentSourceUrl;
|
|
8520
8547
|
this.uploadSaveUrl = attachmentSourceUrl + '/Chunk_Upload_Save';
|
|
8521
8548
|
}
|
|
8522
|
-
|
|
8549
|
+
//#endregion
|
|
8523
8550
|
if (this.data['SelectFileOnly']) {
|
|
8524
|
-
//
|
|
8551
|
+
// Append all files to component memory
|
|
8525
8552
|
e.files.forEach((file) => __awaiter(this, void 0, void 0, function* () {
|
|
8526
|
-
if (file
|
|
8527
|
-
|
|
8528
|
-
|
|
8529
|
-
|
|
8530
|
-
|
|
8531
|
-
|
|
8532
|
-
|
|
8533
|
-
|
|
8534
|
-
|
|
8535
|
-
|
|
8536
|
-
|
|
8537
|
-
|
|
8538
|
-
|
|
8539
|
-
|
|
8540
|
-
|
|
8541
|
-
|
|
8542
|
-
|
|
8543
|
-
|
|
8544
|
-
|
|
8553
|
+
if (me.isValidUploadedFile(me, file)) {
|
|
8554
|
+
if (file.rawFile) {
|
|
8555
|
+
const reader = new FileReader();
|
|
8556
|
+
reader.onload = function (ev) {
|
|
8557
|
+
// Clone the data and also add the read file to the object
|
|
8558
|
+
const fileData = Object.assign({}, file);
|
|
8559
|
+
fileData['file'] = ev.target["result"];
|
|
8560
|
+
// Push to component fileList
|
|
8561
|
+
me.fileList.push(fileData);
|
|
8562
|
+
me.group['zupload_' + me.data.Value] = me.fileList;
|
|
8563
|
+
if (me.data['FileSelectedEvent']) {
|
|
8564
|
+
// Call the project event
|
|
8565
|
+
me.group.subject.next({
|
|
8566
|
+
type: "zupload-fileSelectedEvent",
|
|
8567
|
+
target: me.data['FileSelectedEvent'],
|
|
8568
|
+
data: me.fileList
|
|
8569
|
+
});
|
|
8570
|
+
}
|
|
8571
|
+
};
|
|
8572
|
+
yield reader.readAsDataURL(file.rawFile);
|
|
8573
|
+
}
|
|
8574
|
+
}
|
|
8575
|
+
else {
|
|
8576
|
+
e.preventDefault();
|
|
8545
8577
|
}
|
|
8546
8578
|
}));
|
|
8547
8579
|
}
|
|
@@ -8553,29 +8585,32 @@ class ZuploadComponent extends InputFieldBase {
|
|
|
8553
8585
|
//Check if Image Compression is enabled.
|
|
8554
8586
|
if (imageCompressionEnabled === true) {
|
|
8555
8587
|
e.files.forEach((file) => {
|
|
8556
|
-
|
|
8557
|
-
|
|
8558
|
-
if (
|
|
8559
|
-
|
|
8560
|
-
|
|
8561
|
-
|
|
8562
|
-
.
|
|
8563
|
-
|
|
8564
|
-
|
|
8565
|
-
|
|
8566
|
-
|
|
8567
|
-
|
|
8568
|
-
|
|
8569
|
-
|
|
8570
|
-
|
|
8571
|
-
|
|
8572
|
-
|
|
8588
|
+
if (me.isValidUploadedFile(me, file)) {
|
|
8589
|
+
// Compress only if it is an image file
|
|
8590
|
+
if (file.rawFile && file.rawFile.type.includes("image")) {
|
|
8591
|
+
if (!file.validationErrors) {
|
|
8592
|
+
const imgConfig = this.compressionConfigHandler(this.data.Compression);
|
|
8593
|
+
if (file.size > imgConfig.FileSizeMinSizeByte) {
|
|
8594
|
+
me.compressImage.compress(file.rawFile, imgConfig) //Pass in parameter to set the Compression Options
|
|
8595
|
+
.pipe(take(1))
|
|
8596
|
+
.subscribe(compressFile => {
|
|
8597
|
+
this.ngZone.run(() => {
|
|
8598
|
+
file.rawFile = compressFile;
|
|
8599
|
+
file.size = compressFile.size;
|
|
8600
|
+
// Push to component fileList
|
|
8601
|
+
me.fileList.push(Object.assign({}, file));
|
|
8602
|
+
const reader = new FileReader();
|
|
8603
|
+
reader.readAsDataURL(file.rawFile);
|
|
8604
|
+
});
|
|
8605
|
+
console.log(`Compressed file size: ${(file.rawFile.size / 1024).toFixed(2)}KB`);
|
|
8573
8606
|
});
|
|
8574
|
-
|
|
8575
|
-
|
|
8576
|
-
|
|
8577
|
-
|
|
8578
|
-
|
|
8607
|
+
} // file size check
|
|
8608
|
+
} // validationErrors check
|
|
8609
|
+
} // file type check
|
|
8610
|
+
}
|
|
8611
|
+
else {
|
|
8612
|
+
e.preventDefault();
|
|
8613
|
+
}
|
|
8579
8614
|
}); // loop each file
|
|
8580
8615
|
} // imagecompression check
|
|
8581
8616
|
// add to group scope
|
|
@@ -8587,13 +8622,20 @@ class ZuploadComponent extends InputFieldBase {
|
|
|
8587
8622
|
this.uploadComponent.clearFiles();
|
|
8588
8623
|
this.group['zupload_' + this.data.Value] = this.fileList;
|
|
8589
8624
|
}
|
|
8625
|
+
formatFileSize(bytes) {
|
|
8626
|
+
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
8627
|
+
if (bytes === 0)
|
|
8628
|
+
return '0 Byte';
|
|
8629
|
+
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
|
8630
|
+
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
|
|
8631
|
+
}
|
|
8590
8632
|
}
|
|
8591
|
-
ZuploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, deps: [{ token: ZComponentService }, { token: i2.AuthService }, { token: i2.CompressImageService }, { token: i2.ZCoreService }, { token: i0.NgZone }, { token: i2.SharePointService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8592
|
-
ZuploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZuploadComponent, selector: "app-zupload", viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: ["uploadComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n <kendo-upload
|
|
8633
|
+
ZuploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, deps: [{ token: ZComponentService }, { token: i2.AuthService }, { token: i2.CompressImageService }, { token: i2.ZCoreService }, { token: i0.NgZone }, { token: i2.SharePointService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8634
|
+
ZuploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZuploadComponent, selector: "app-zupload", viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: ["uploadComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n <kendo-upload\r\n *ngIf=\"!data.SelectFileOnly\"\r\n #uploadComponent\r\n [id]=\"data.Value\"\r\n [autoUpload]=\"isAutoUpload\"\r\n [saveUrl]=\"uploadSaveUrl\"\r\n [removeUrl]=\"uploadRemoveUrl\"\r\n [restrictions]=\"restrictions\"\r\n [multiple]=\"isMultiple\"\r\n [chunkable]=\"chunkSettings\"\r\n [showFileList]=\"showFileList\"\r\n (select)=\"selectEventHandler($event)\"\r\n (remove)=\"onRemove($event)\"\r\n (success)=\"onSuccess($event)\"\r\n (upload)=\"uploadEventHandler($event)\"\r\n [style]=\"componentProperties.style.style1\"\r\n class=\"e1tag-style1\">\r\n </kendo-upload>\r\n\r\n <kendo-fileselect\r\n *ngIf=\"data.SelectFileOnly\"\r\n #uploadComponent\r\n [id]=\"data.Value\"\r\n (select)=\"selectEventHandler($event)\"\r\n (remove)=\"onRemove($event)\"\r\n [formControlName]=\"data.Value\"\r\n (valueChange)=\"onChange($event)\" \r\n [restrictions]=\"restrictions\"\r\n [style]=\"componentProperties.style.style1\"\r\n class=\"e1tag-style1\">\r\n </kendo-fileselect>\r\n\r\n <div\r\n *ngIf=\"imagePreviews.length\"\r\n class=\"image-preview-container e1tag-style2\"\r\n [style]=\"componentProperties.style.style2\">\r\n <div\r\n class=\"label-container e1tag-style3\"\r\n [style]=\"componentProperties.style.style3\">\r\n Image Preview:\r\n </div>\r\n <div\r\n class=\"image-container e1tag-style4\"\r\n [style]=\"componentProperties.style.style4\">\r\n <img\r\n *ngFor=\"let image of imagePreviews\"\r\n [src]=\"image.src\"\r\n alt=\"image preview\"\r\n height=\"100\"\r\n class=\"e1tag-style5\"\r\n [style]=\"componentProperties.style.style5\" />\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"], components: [{ type: i3$7.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "multiple", "disabled", "showFileList", "tabindex", "zoneId", "tabIndex", "accept", "restrictions", "focusableId", "actionsLayout"], outputs: ["blur", "cancel", "clear", "complete", "error", "focus", "pause", "remove", "resume", "select", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { type: i3$7.FileSelectComponent, selector: "kendo-fileselect", inputs: ["accept", "disabled", "multiple", "name", "showFileList", "tabindex", "restrictions", "zoneId", "focusableId"], outputs: ["blur", "focus", "select", "remove", "valueChange"], exportAs: ["kendoFileSelect"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
8593
8635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, decorators: [{
|
|
8594
8636
|
type: Component,
|
|
8595
|
-
args: [{ selector: "app-zupload", template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n <kendo-upload
|
|
8596
|
-
}], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.AuthService }, { type: i2.CompressImageService }, { type: i2.ZCoreService }, { type: i0.NgZone }, { type: i2.SharePointService }]; }, propDecorators: { uploadComponent: [{
|
|
8637
|
+
args: [{ selector: "app-zupload", template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n <kendo-upload\r\n *ngIf=\"!data.SelectFileOnly\"\r\n #uploadComponent\r\n [id]=\"data.Value\"\r\n [autoUpload]=\"isAutoUpload\"\r\n [saveUrl]=\"uploadSaveUrl\"\r\n [removeUrl]=\"uploadRemoveUrl\"\r\n [restrictions]=\"restrictions\"\r\n [multiple]=\"isMultiple\"\r\n [chunkable]=\"chunkSettings\"\r\n [showFileList]=\"showFileList\"\r\n (select)=\"selectEventHandler($event)\"\r\n (remove)=\"onRemove($event)\"\r\n (success)=\"onSuccess($event)\"\r\n (upload)=\"uploadEventHandler($event)\"\r\n [style]=\"componentProperties.style.style1\"\r\n class=\"e1tag-style1\">\r\n </kendo-upload>\r\n\r\n <kendo-fileselect\r\n *ngIf=\"data.SelectFileOnly\"\r\n #uploadComponent\r\n [id]=\"data.Value\"\r\n (select)=\"selectEventHandler($event)\"\r\n (remove)=\"onRemove($event)\"\r\n [formControlName]=\"data.Value\"\r\n (valueChange)=\"onChange($event)\" \r\n [restrictions]=\"restrictions\"\r\n [style]=\"componentProperties.style.style1\"\r\n class=\"e1tag-style1\">\r\n </kendo-fileselect>\r\n\r\n <div\r\n *ngIf=\"imagePreviews.length\"\r\n class=\"image-preview-container e1tag-style2\"\r\n [style]=\"componentProperties.style.style2\">\r\n <div\r\n class=\"label-container e1tag-style3\"\r\n [style]=\"componentProperties.style.style3\">\r\n Image Preview:\r\n </div>\r\n <div\r\n class=\"image-container e1tag-style4\"\r\n [style]=\"componentProperties.style.style4\">\r\n <img\r\n *ngFor=\"let image of imagePreviews\"\r\n [src]=\"image.src\"\r\n alt=\"image preview\"\r\n height=\"100\"\r\n class=\"e1tag-style5\"\r\n [style]=\"componentProperties.style.style5\" />\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"] }]
|
|
8638
|
+
}], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.AuthService }, { type: i2.CompressImageService }, { type: i2.ZCoreService }, { type: i0.NgZone }, { type: i2.SharePointService }, { type: i2.AlertService }]; }, propDecorators: { uploadComponent: [{
|
|
8597
8639
|
type: ViewChild,
|
|
8598
8640
|
args: ["uploadComponent"]
|
|
8599
8641
|
}] } });
|