Update ImageDto exchange format

Author: MrBartusek

apps/api/src/helpers/dtoHelpers.ts

@@ -5,7 +5,7 @@ class DtoHelpers {
 	public static getImageDto(key?: string): ImageDto {
 		const hasImage = key != undefined;
 		const url = Utils.getApiBaseUrl() + `images/${key || 'default'}`;
-		return { hasImage, url };
+		return { hasImage: true, url };
 	}
 }
 

apps/client/src/components/Dropzone.tsx

@@ -22,7 +22,7 @@ function Dropzone({ onChange, render }: DropzoneProps) {
 
 		const url = await PromiseFileReader.readAsDataURL(file);
 
-		onChange({ hasImage: true, url });
+		onChange({ hasImage: true, url, data: url });
 	};
 
 	const { getRootProps, getInputProps, isDragActive } = useDropzone({

apps/client/src/components/Product/ProductUpdateForm.tsx

@@ -23,7 +23,7 @@ export interface ProductCreateFormProps {
 type Inputs = {
 	name: string;
 	description?: string;
-	image?: ImageDto;
+	image: ImageDto;
 	buyPrice?: number;
 	sellPrice?: number;
 	unit?: string;
@@ -48,10 +48,16 @@ function ProductUpdateForm({ product }: ProductCreateFormProps) {
 	function onSubmit(inputs: Inputs) {
 		setLoading(true);
 
+		const { image, ...rest } = inputs;
+
 		const dto: UpdateProductDto = {
 			organizationId: appContext.organization.id,
 			...product,
-			...inputs,
+			image: {
+				hasImage: image.hasImage,
+				data: image.data,
+			},
+			...rest,
 		};
 
 		Utils.postFetcher<ProductDto>(`/api/products/${product.id}`, dto, { method: 'PUT' })

packages/shared-types/src/ImageDto.ts

@@ -1,9 +1,14 @@
-import { IsBase64, IsBoolean, IsEmpty } from "class-validator";
+import { IsBoolean, IsDataURI, IsEmpty, IsOptional } from "class-validator";
 
 export class ImageDto {
     @IsBoolean()
     hasImage: boolean;
 
-    @IsBase64()
+    @IsEmpty()
+    @IsOptional()
     url?: string;
+
+    @IsOptional()
+    @IsDataURI()
+    data?: string;
 }

packages/shared-types/src/product/UpdateProductDto.ts

@@ -1,6 +1,10 @@
+import { ValidateNested } from "class-validator";
 import { ImageDto } from "../ImageDto";
 import { CreateProductDto } from "./CreateProductDto";
+import { Type } from "class-transformer";
 
 export class UpdateProductDto extends CreateProductDto {
+    @ValidateNested()
+    @Type(() => ImageDto)
     image: ImageDto;
 }