inviton-powerduck 0.0.136 → 0.0.138

package/components/fullcalendar/timegrid-calendar.tsx

@@ -329,7 +329,7 @@ class TimegridCalendarComponent extends TsxComponent<TimegridCalendarArgs> imple
 			resourceGroupField: 'building',
 			events: this.getEvents(),
 			eventRender: (args) => {
-				console.log('rendering');
+				// console.log('rendering');
 				args.el.classList.add('tg-has-menu');
 				args.el.setAttribute('data-uuid', args.event.extendedProps.uuid);
 				args.el.setAttribute('data-event-id', args.event.id);

package/components/image-crop/image-cropping-modal.tsx

@@ -99,7 +99,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		const start = new Date().getTime();
 		const img = new Image();
 		img.onload = function () {
-			const waitForLoad = function (callback) {
+			const waitForLoad = (callback) => {
 				if (new Date().getTime() - start > 700) {
 					callback();
 				} else {
@@ -150,18 +150,6 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		(this.$refs.imageCropModal as typeof Modal.prototype).hide();
 	}
 
-	private getImageFormat(dataUrl): string {
-		if (dataUrl.length > 100) {
-			dataUrl = dataUrl.substring(0, 100);
-		}
-
-		if (dataUrl.contains('image/png')) {
-			return 'image/png';
-		} else {
-			return 'image/jpeg';
-		}
-	}
-
 	private handleSaveButtonClicked() {
 		this.blocked = true;
 
@@ -169,7 +157,6 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		const canvas = this.$refs.imageCropCanvas as HTMLCanvasElement;
 		const ctx = canvas.getContext('2d');
 		const selection = this.getCurrentSelection();
-
 		image.src = this.getFileName();
 		image.onload = async () => {
 			this.drawCroppedImageOnCanvas(
@@ -196,7 +183,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 						this.blocked = false;
 					}, 500);
 				},
-				this.getImageFormat(image.src),
+				await this.getImageFormat(image.src),
 				0.9,
 			);
 		};
@@ -272,6 +259,58 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		}
 	}
 
+	private async getImageFormat(url: string): Promise<string | null> {
+		const response = await fetch(url, { mode: 'cors' });
+		if (!response.ok) {
+			throw new Error('Failed to fetch image');
+		}
+
+		const buffer = await response.arrayBuffer();
+		const bytes = new Uint8Array(buffer);
+
+		if (
+			bytes[0] === 0x89
+			&& bytes[1] === 0x50
+			&& bytes[2] === 0x4E
+			&& bytes[3] === 0x47
+		) {
+			return 'image/png';
+		}
+
+		if (
+			bytes[0] === 0xFF
+			&& bytes[1] === 0xD8
+			&& bytes[bytes.length - 2] === 0xFF
+			&& bytes[bytes.length - 1] === 0xD9
+		) {
+			return 'image/jpeg';
+		}
+
+		if (
+			bytes[0] === 0x47
+			&& bytes[1] === 0x49
+			&& bytes[2] === 0x46
+			&& bytes[3] === 0x38
+		) {
+			return 'image/gif';
+		}
+
+		if (
+			bytes[0] === 0x52
+			&& bytes[1] === 0x49
+			&& bytes[2] === 0x46
+			&& bytes[3] === 0x46
+			&& bytes[8] === 0x57
+			&& bytes[9] === 0x45
+			&& bytes[10] === 0x42
+			&& bytes[11] === 0x50
+		) {
+			return 'image/webp';
+		}
+
+		return null;
+	}
+
 	private getCurrentSelection(): ImageCropSelection {
 		const img = $(this.getImageElement()).first();
 		const cropHolder = $(this.$refs.imageCroppingContainer).find('.jcrop-active').first();

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

@@ -2,8 +2,11 @@ import type { _ButtonArgsBase, ButtonLayout, ButtonSize } from '../button/button
 import type { UploadButtonFileObtainedArgs } from '../button/upload-button';
 import type { ImageCroppedUploadArgs } from './image-cropping-modal';
 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';
@@ -27,6 +30,7 @@ interface UploadImageAndCropButtonArgs extends _ButtonArgsBase {
 	uploadComplete: (args: any) => void;
 	autoCommit?: boolean;
 	disableCompression?: boolean;
+	allowedTypes?: string[];
 	compressionMaxSizeMb?: number;
 	isLoading?: boolean;
 }
@@ -54,6 +58,7 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 	@Prop() uploadComplete: (args: any) => void;
 	@Prop() autoCommit: boolean;
 	@Prop() disableCompression: boolean;
+	@Prop() allowedTypes: string[];
 	@Prop() compressionMaxSizeMb?: number;
 	isInternalLoading: boolean = false;
 
@@ -61,6 +66,11 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 		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,
@@ -78,9 +88,9 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 				file: e.file,
 				fileName: e.file.name,
 				dataUrl: null,
-			}).then((resp) => {
+			}).then(() => {
 				this.isInternalLoading = false;
-			}).catch((err) => {
+			}).catch((_err) => {
 				this.isInternalLoading = false;
 			});
 		}
@@ -91,8 +101,6 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 	}
 
 	async getUploadPromise(args: ImageCroppedUploadArgs): Promise<any> {
-		const self = this;
-
 		if (!(this.disableCompression || args.file.type == 'image/svg+xml')) {
 			args.file = await BrowserImageCompression.compress(args.file, {
 				maxSizeMB: this.compressionMaxSizeMb,
@@ -101,8 +109,8 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 
 		return new Promise((resolve, reject) => {
 			const formData = new FormData();
-			if (self.uploadArgs != null) {
-				const argsVal = self.uploadArgs(args);
+			if (this.uploadArgs != null) {
+				const argsVal = this.uploadArgs(args);
 				if (argsVal != null) {
 					for (const key in argsVal) {
 						formData.append(key, argsVal[key]);
@@ -110,10 +118,10 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 				}
 			}
 
-			if (self.autoCommit === true) {
+			if (this.autoCommit === true) {
 				const request = new XMLHttpRequest();
-				request.open('POST', self.uploadUrl);
-				request.onreadystatechange = function () {
+				request.open('POST', this.uploadUrl);
+				request.onreadystatechange = () => {
 					if (request.readyState == 4) {
 						let response;
 						try {
@@ -123,8 +131,8 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 						}
 
 						if (request.status == 200) {
-							if (self.uploadComplete) {
-								self.uploadComplete(response);
+							if (this.uploadComplete) {
+								this.uploadComplete(response);
 							}
 
 							resolve(response);
@@ -144,8 +152,8 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 
 				request.send(formData);
 			} else {
-				const argsVal = self.uploadArgs(args);
-				self.uploadComplete(argsVal);
+				const argsVal = this.uploadArgs(args);
+				this.uploadComplete(argsVal);
 				resolve(formData);
 			}
 		});