diff --git a/__mocks__/@components/FileUploader.component.tsx b/__mocks__/@components/FileUploader.component.tsx index 783e2c394..45308fc29 100644 --- a/__mocks__/@components/FileUploader.component.tsx +++ b/__mocks__/@components/FileUploader.component.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Component, useState} from 'react'; import Upload,{ UploadChangeParam, UploadFile, UploadProps } from 'antd/es/upload'; -import ImageNew, { ImageCreate } from '@/models/media/image.model'; +import ImageNew, {ImageAssigment, ImageCreate} from '@/models/media/image.model'; import Audio, { AudioCreate } from '@/models/media/audio.model'; interface Props{ @@ -9,11 +9,12 @@ interface Props{ edgeSwipe?: boolean; onChange: (uploadParams: UploadChangeParam>) => void; uploadTo:'image' | 'audio'; - greyFilterForImage?: boolean; + enableGrayscale?: boolean; + imageType?: ImageAssigment; onSuccessUpload?:(value: ImageNew | Audio, file?: UploadFile)=>void; } -const FileUploaderMock: React.FC = ({ onSuccessUpload, uploadTo, greyFilterForImage = false, children, onChange }) => { +const FileUploaderMock: React.FC = ({ onSuccessUpload, uploadTo, enableGrayscale = false, imageType, children, onChange }) => { const handleFileChange = (e: UploadChangeParam) => { let file = e.file; diff --git a/src/app/common/components/FileUploader/FileUploader.component.tsx b/src/app/common/components/FileUploader/FileUploader.component.tsx index 83acfb2fa..b95c4f173 100644 --- a/src/app/common/components/FileUploader/FileUploader.component.tsx +++ b/src/app/common/components/FileUploader/FileUploader.component.tsx @@ -1,11 +1,12 @@ -import { useRef } from 'react'; import * as React from 'react'; +import { UploadRequestOption } from 'rc-upload/lib/interface'; + import Upload, { RcFile, UploadChangeParam, UploadFile, UploadProps } from 'antd/es/upload'; -import {UploadRequestOption} from 'rc-upload/lib/interface' + import AudiosApi from '@/app/api/media/audios.api'; import ImagesApi from '@/app/api/media/images.api'; import Audio, { AudioCreate } from '@/models/media/audio.model'; -import ImageNew, { ImageCreate } from '@/models/media/image.model'; +import ImageNew, { ImageAssigment, ImageCreate } from '@/models/media/image.model'; type UploaderWithoutChildren = Omit; @@ -13,64 +14,60 @@ interface Props extends UploaderWithoutChildren { children: JSX.Element[] | JSX.Element; edgeSwipe?: boolean; uploadTo:'image' | 'audio'; - greyFilterForImage?: boolean; + enableGrayscale?: boolean; + imageType?: ImageAssigment; onSuccessUpload?:(value: ImageNew | Audio, file?: UploadFile)=>void; } const FileUploader:React.FC = ({ - onSuccessUpload, uploadTo, greyFilterForImage = false, children, ...uploadProps + onSuccessUpload, uploadTo, enableGrayscale = false, imageType, children, ...uploadProps }) => { - const imageDataAsURL = useRef(null); - - const applyGrayscale = (url:string) => { - return new Promise((resolve, reject) => - { - const img = new Image(); - - img.onload = () => { - if (img.height > 0 && img.width > 0) { - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - if (context !== null) { - canvas.width = img.width; - canvas.height = img.height; - context.drawImage(img, 0, 0); - const imageData = context.getImageData(0, 0, canvas.width, canvas.height); - const { data } = imageData; - for (let i = 0; i < data.length; i += 4) { - const red = data[i]; - const green = data[i + 1]; - const blue = data[i + 2]; - const grayscale = (red + green + blue) / 3; - - data[i] = grayscale; - data[i + 1] = grayscale; - data[i + 2] = grayscale; - } - - context.putImageData(imageData, 0, 0); - resolve(canvas.toDataURL('image/webp')); - } else { - reject(new Error('Failed to get canvas context')); + const applyGrayscale = (url:string) => new Promise((resolve, reject) => { + const img = new Image(); + + img.onload = () => { + if (img.height > 0 && img.width > 0) { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + if (context !== null) { + canvas.width = img.width; + canvas.height = img.height; + context.drawImage(img, 0, 0); + const imageData = context.getImageData(0, 0, canvas.width, canvas.height); + const { data } = imageData; + for (let i = 0; i < data.length; i += 4) { + const red = data[i]; + const green = data[i + 1]; + const blue = data[i + 2]; + const grayscale = (red + green + blue) / 3; + + data[i] = grayscale; + data[i + 1] = grayscale; + data[i + 2] = grayscale; } + + context.putImageData(imageData, 0, 0); + resolve(canvas.toDataURL('image/webp')); } else { - reject(new Error('Image has invalid dimensions')); + reject(new Error('Failed to get canvas context')); } - }; - - img.onerror = (e) => { - reject(new Error('Failed to load image')); - }; - - img.src = url; - }); - }; - + } else { + reject(new Error('Image has invalid dimensions')); + } + }; + + img.onerror = (e) => { + reject(new Error('Failed to load image')); + }; + + img.src = url; + }); const onUploadChange = (uploadParams: UploadChangeParam>) => { if (uploadProps.onChange) { uploadProps.onChange(uploadParams); } }; + const onFileUpload = (uploadType:'image' | 'audio', uplFile:UploadFile, url: string) :Promise< ImageNew | Audio> => { if (uploadType === 'audio') { @@ -90,28 +87,27 @@ const FileUploader:React.FC = ({ .lastIndexOf('.') + 1, uplFile.name.length), mimeType: uplFile.type!, title: uplFile.name, - alt: "default" }; + alt: imageType !== undefined ? imageType.toString() : '0' }; return ImagesApi.create(image); }; + const customRequest = async (options: UploadRequestOption) => { - const { - onSuccess, onError , action, onProgress, - } = options; + const { onSuccess, onError, action, onProgress } = options; const reader = new FileReader(); - - reader.onloadend = async(obj) => { + + reader.onloadend = async (obj) => { let baseString: any; baseString = obj.target?.result; - if (greyFilterForImage) { - await applyGrayscale(baseString).then((greyScaleUrl)=>{ + if (enableGrayscale) { + await applyGrayscale(baseString).then((greyScaleUrl) => { baseString = greyScaleUrl; - }) + }); } - + await onFileUpload(uploadTo, file, baseString) .then((respones) => { - if(onSuccess){ + if (onSuccess) { onSuccess(respones); } if (onSuccessUpload) { @@ -119,18 +115,17 @@ const FileUploader:React.FC = ({ } }) .catch((err) => { - if(onError){ + if (onError) { onError(err); } }); }; - + const file = options.file as RcFile; if (file) { reader.readAsDataURL(file); } - }; return ( @@ -138,7 +133,7 @@ const FileUploader:React.FC = ({ {...uploadProps} customRequest={customRequest} onChange={onUploadChange} - data-testid={"fileuploader"} + data-testid="fileuploader" > {children} diff --git a/src/features/AdminPage/CategoriesPage/CategoriesPage/CategoryAdminModal.component.tsx b/src/features/AdminPage/CategoriesPage/CategoriesPage/CategoryAdminModal.component.tsx index cfdf90189..4e96b5cff 100644 --- a/src/features/AdminPage/CategoriesPage/CategoriesPage/CategoryAdminModal.component.tsx +++ b/src/features/AdminPage/CategoriesPage/CategoriesPage/CategoryAdminModal.component.tsx @@ -212,7 +212,7 @@ const SourceModal: React.FC = ({ ]} > { const newFileList: UploadFile = { @@ -222,6 +222,7 @@ const FileInputsPart = ({ form, onChange }: FileInputsPartProps) => { beforeUpload={checkFile} onPreview={handlePreview} uploadTo="image" + imageType={ImageAssigment.animation} onSuccessUpload={(file: Image | Audio) => { handleFileUpload(file.id, 'animationId', 'imagesUpdate'); setAnimation([convertFileToUploadFile(file as Image)]); @@ -255,6 +256,7 @@ const FileInputsPart = ({ form, onChange }: FileInputsPartProps) => { beforeUpload={checkFile} onPreview={handlePreview} uploadTo="image" + imageType={ImageAssigment.blackandwhite} onSuccessUpload={(file: Image | Audio) => { handleFileUpload(file.id, 'blackAndWhiteId', 'imagesUpdate'); setBlackAndWhite([convertFileToUploadFile(file as Image)]); @@ -281,6 +283,7 @@ const FileInputsPart = ({ form, onChange }: FileInputsPartProps) => { fileList={relatedFigure} onPreview={handlePreview} uploadTo="image" + imageType={ImageAssigment.relatedfigure} beforeUpload={checkFile} onSuccessUpload={(file: Image | Audio) => { handleFileUpload(file.id, 'relatedFigureId', 'imagesUpdate');