inviton-powerduck 0.0.154 → 0.0.155

package/components/image-crop/upload-and-crop.tsx

@@ -5,184 +5,184 @@ import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { BrowserImageCompression } from '../../common/utils/broswer-image-compression';
-import { formatString } from '../../common/utils/format-string';
 import { PortalUtils } from '../../common/utils/utils';
 import UploadButton from '../button/upload-button';
 import LoadingIndicator from '../loading-indicator';
 import NotificationProvider from '../ui/notification';
 import ImageCropModal from './image-cropping-modal';
+import { format } from '../../common/extensions/string-extensions';
 
 export interface UploadImageAndCropFileCompleteArgs {
-	imageSrc: string;
-	fileName: string;
+    imageSrc: string;
+    fileName: string;
 }
 
 export interface UploadImageAndCropUploadEventArgs extends ImageCroppedUploadArgs { }
 
 interface UploadImageAndCropButtonArgs extends _ButtonArgsBase {
-	title?: string;
-	aspectRatio?: number;
-	useCropper?: boolean;
-	uploadUrl?: string;
-	targetBlobContainer: string;
-	imageCropperTitleMessage?: string;
-	uploadArgs: (e: UploadImageAndCropUploadEventArgs) => any;
-	uploadComplete: (args: any) => void;
-	autoCommit?: boolean;
-	disableCompression?: boolean;
-	allowedTypes?: string[];
-	compressionMaxSizeMb?: number;
-	isLoading?: boolean;
+    title?: string;
+    aspectRatio?: number;
+    useCropper?: boolean;
+    uploadUrl?: string;
+    targetBlobContainer: string;
+    imageCropperTitleMessage?: string;
+    uploadArgs: (e: UploadImageAndCropUploadEventArgs) => any;
+    uploadComplete: (args: any) => void;
+    autoCommit?: boolean;
+    disableCompression?: boolean;
+    allowedTypes?: string[];
+    compressionMaxSizeMb?: number;
+    isLoading?: boolean;
 }
 
 @Component
 class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropButtonArgs> implements UploadImageAndCropButtonArgs {
-	@Prop() cssClass!: string;
-	@Prop() layout!: ButtonLayout;
-	@Prop() text!: string;
-	@Prop() size!: ButtonSize;
-	@Prop() round!: boolean;
-	@Prop() outlined!: boolean;
-	@Prop() dismissModal!: boolean;
-	@Prop() icon!: string;
-	@Prop() disabled!: boolean;
-	@Prop() useCropper!: boolean;
-	@Prop() fullWidth!: boolean;
-	@Prop() title!: string;
-	@Prop() aspectRatio!: number;
-	@Prop() uploadUrl: string;
-	@Prop() isLoading?: boolean;
-	@Prop() targetBlobContainer: string;
-	@Prop() imageCropperTitleMessage!: string;
-	@Prop() uploadArgs: (e: UploadImageAndCropUploadEventArgs) => any;
-	@Prop() uploadComplete: (args: any) => void;
-	@Prop() autoCommit: boolean;
-	@Prop() disableCompression: boolean;
-	@Prop() allowedTypes: string[];
-	@Prop() compressionMaxSizeMb?: number;
-	isInternalLoading: boolean = false;
-
-	handleFileObtained(e: UploadButtonFileObtainedArgs): void {
-		const urlCreator = window.URL || window.webkitURL;
-		const imgUrl = urlCreator.createObjectURL(e.file);
-
-		if (this.allowedTypes?.length > 0 && !this.allowedTypes.includes(e.file.type)) {
-			NotificationProvider.showErrorMessage(formatString(PowerduckState.getResourceValue('uploadImageInvalidFileType'), PortalUtils.htmlEscape(this.allowedTypes.join(', '))));
-			return;
-		}
-
-		if (this.useCropper != false) {
-			(this.$refs.imgCrop as typeof ImageCropModal.prototype).show({
-				fileName: e.file.name,
-				imageSrc: imgUrl,
-				aspectRatio: (this.aspectRatio || (5 / 3)),
-				title: null,
-				titleMessageHtml: this.imageCropperTitleMessage,
-				handleCropUpload: (e) => {
-					return this.getUploadPromise(e);
-				},
-			});
-		} else {
-			this.isInternalLoading = true;
-			this.getUploadPromise({
-				file: e.file,
-				fileName: e.file.name,
-				dataUrl: null,
-			}).then(() => {
-				this.isInternalLoading = false;
-			}).catch((_err) => {
-				this.isInternalLoading = false;
-			});
-		}
-	}
-
-	getUploadButton() {
-		return this.$refs.uploadButton as typeof UploadButton.prototype;
-	}
-
-	async getUploadPromise(args: ImageCroppedUploadArgs): Promise<any> {
-		if (!(this.disableCompression || args.file.type == 'image/svg+xml')) {
-			args.file = await BrowserImageCompression.compress(args.file, {
-				maxSizeMB: this.compressionMaxSizeMb,
-			});
-		}
-
-		return new Promise((resolve, reject) => {
-			const formData = new FormData();
-			if (this.uploadArgs != null) {
-				const argsVal = this.uploadArgs(args);
-				if (argsVal != null) {
-					for (const key in argsVal) {
-						formData.append(key, argsVal[key]);
-					}
-				}
-			}
-
-			if (this.autoCommit === true) {
-				const request = new XMLHttpRequest();
-				request.open('POST', this.uploadUrl);
-				request.onreadystatechange = () => {
-					if (request.readyState == 4) {
-						let response;
-						try {
-							response = JSON.parse(request.responseText);
-						} catch (e) {
-							response = request.responseText;
-						}
-
-						if (request.status == 200) {
-							if (this.uploadComplete) {
-								this.uploadComplete(response);
-							}
-
-							resolve(response);
-						} else {
-							try {
-								if (response.responseText) {
-									NotificationProvider.showErrorMessage(response.responseText);
-								} else {
-									NotificationProvider.showErrorMessage(response);
-								}
-							} catch (e) { }
-
-							reject(response);
-						}
-					}
-				};
-
-				request.send(formData);
-			} else {
-				const argsVal = this.uploadArgs(args);
-				this.uploadComplete(argsVal);
-				resolve(formData);
-			}
-		});
-	}
-
-	render(h) {
-		return (
-			<span style="position:relative;">
-				<LoadingIndicator visible={(this.isLoading || this.isInternalLoading)} />
-				<UploadButton
-					ref="uploadButton"
-					fileObtained={async (e) => {
-						await this.handleFileObtained(e);
-					}}
-					onlyImages={true}
-					cssClass={this.cssClass}
-					layout={this.layout}
-					text={this.text}
-					size={this.size}
-					round={this.round}
-					outlined={this.outlined}
-					icon={this.icon}
-					disabled={this.disabled}
-				/>
-
-				<ImageCropModal ref="imgCrop" />
-			</span>
-		);
-	}
+    @Prop() cssClass!: string;
+    @Prop() layout!: ButtonLayout;
+    @Prop() text!: string;
+    @Prop() size!: ButtonSize;
+    @Prop() round!: boolean;
+    @Prop() outlined!: boolean;
+    @Prop() dismissModal!: boolean;
+    @Prop() icon!: string;
+    @Prop() disabled!: boolean;
+    @Prop() useCropper!: boolean;
+    @Prop() fullWidth!: boolean;
+    @Prop() title!: string;
+    @Prop() aspectRatio!: number;
+    @Prop() uploadUrl: string;
+    @Prop() isLoading?: boolean;
+    @Prop() targetBlobContainer: string;
+    @Prop() imageCropperTitleMessage!: string;
+    @Prop() uploadArgs: (e: UploadImageAndCropUploadEventArgs) => any;
+    @Prop() uploadComplete: (args: any) => void;
+    @Prop() autoCommit: boolean;
+    @Prop() disableCompression: boolean;
+    @Prop() allowedTypes: string[];
+    @Prop() compressionMaxSizeMb?: number;
+    isInternalLoading: boolean = false;
+
+    handleFileObtained(e: UploadButtonFileObtainedArgs): void {
+        const urlCreator = window.URL || window.webkitURL;
+        const imgUrl = urlCreator.createObjectURL(e.file);
+
+        if (this.allowedTypes?.length > 0 && !this.allowedTypes.includes(e.file.type)) {
+            NotificationProvider.showErrorMessage(PowerduckState.getResourceValue('uploadImageInvalidFileType')[format](PortalUtils.htmlEscape(this.allowedTypes.join(', '))));
+            return;
+        }
+
+        if (this.useCropper != false) {
+            (this.$refs.imgCrop as typeof ImageCropModal.prototype).show({
+                fileName: e.file.name,
+                imageSrc: imgUrl,
+                aspectRatio: (this.aspectRatio || (5 / 3)),
+                title: null,
+                titleMessageHtml: this.imageCropperTitleMessage,
+                handleCropUpload: (e) => {
+                    return this.getUploadPromise(e);
+                },
+            });
+        } else {
+            this.isInternalLoading = true;
+            this.getUploadPromise({
+                file: e.file,
+                fileName: e.file.name,
+                dataUrl: null,
+            }).then(() => {
+                this.isInternalLoading = false;
+            }).catch((_err) => {
+                this.isInternalLoading = false;
+            });
+        }
+    }
+
+    getUploadButton() {
+        return this.$refs.uploadButton as typeof UploadButton.prototype;
+    }
+
+    async getUploadPromise(args: ImageCroppedUploadArgs): Promise<any> {
+        if (!(this.disableCompression || args.file.type == 'image/svg+xml')) {
+            args.file = await BrowserImageCompression.compress(args.file, {
+                maxSizeMB: this.compressionMaxSizeMb,
+            });
+        }
+
+        return new Promise((resolve, reject) => {
+            const formData = new FormData();
+            if (this.uploadArgs != null) {
+                const argsVal = this.uploadArgs(args);
+                if (argsVal != null) {
+                    for (const key in argsVal) {
+                        formData.append(key, argsVal[key]);
+                    }
+                }
+            }
+
+            if (this.autoCommit === true) {
+                const request = new XMLHttpRequest();
+                request.open('POST', this.uploadUrl);
+                request.onreadystatechange = () => {
+                    if (request.readyState == 4) {
+                        let response;
+                        try {
+                            response = JSON.parse(request.responseText);
+                        } catch (e) {
+                            response = request.responseText;
+                        }
+
+                        if (request.status == 200) {
+                            if (this.uploadComplete) {
+                                this.uploadComplete(response);
+                            }
+
+                            resolve(response);
+                        } else {
+                            try {
+                                if (response.responseText) {
+                                    NotificationProvider.showErrorMessage(response.responseText);
+                                } else {
+                                    NotificationProvider.showErrorMessage(response);
+                                }
+                            } catch (e) { }
+
+                            reject(response);
+                        }
+                    }
+                };
+
+                request.send(formData);
+            } else {
+                const argsVal = this.uploadArgs(args);
+                this.uploadComplete(argsVal);
+                resolve(formData);
+            }
+        });
+    }
+
+    render(h) {
+        return (
+            <span style="position:relative;">
+                <LoadingIndicator visible={(this.isLoading || this.isInternalLoading)} />
+                <UploadButton
+                    ref="uploadButton"
+                    fileObtained={async (e) => {
+                        await this.handleFileObtained(e);
+                    }}
+                    onlyImages={true}
+                    cssClass={this.cssClass}
+                    layout={this.layout}
+                    text={this.text}
+                    size={this.size}
+                    round={this.round}
+                    outlined={this.outlined}
+                    icon={this.icon}
+                    disabled={this.disabled}
+                />
+
+                <ImageCropModal ref="imgCrop" />
+            </span>
+        );
+    }
 }
 
 const UploadImageAndCropButton = toNative(UploadImageAndCropButtonComponent);