Skip to content

Commit

Permalink
Merge pull request #1493 from ita-social-projects/feature/issue-1925
Browse files Browse the repository at this point in the history 
Feature/issue 1925
  • Loading branch information
@YuliiaAndreieva
YuliiaAndreieva authored Jan 2, 2025
2 parents f0fd7ca + 59c9963 commit 89737b5
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 68 deletions.
7 changes: 4 additions & 3 deletions __mocks__/@components/FileUploader.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
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{
children: JSX.Element[] | JSX.Element;
edgeSwipe?: boolean;
onChange: (uploadParams: UploadChangeParam<UploadFile<any>>) => void;
uploadTo:'image' | 'audio';
greyFilterForImage?: boolean;
enableGrayscale?: boolean;
imageType?: ImageAssigment;
onSuccessUpload?:(value: ImageNew | Audio, file?: UploadFile)=>void;
}

const FileUploaderMock: React.FC<Props> = ({ onSuccessUpload, uploadTo, greyFilterForImage = false, children, onChange }) => {
const FileUploaderMock: React.FC<Props> = ({ onSuccessUpload, uploadTo, enableGrayscale = false, imageType, children, onChange }) => {

const handleFileChange = (e: UploadChangeParam<UploadFile>) => {
let file = e.file;
Expand Down
121 changes: 58 additions & 63 deletions src/app/common/components/FileUploader/FileUploader.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,73 @@
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<UploadProps, 'children'>;

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<Props> = ({
onSuccessUpload, uploadTo, greyFilterForImage = false, children, ...uploadProps
onSuccessUpload, uploadTo, enableGrayscale = false, imageType, children, ...uploadProps
}) => {
const imageDataAsURL = useRef<any | null>(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<UploadFile<any>>) => {
if (uploadProps.onChange) {
uploadProps.onChange(uploadParams);
}
};

const onFileUpload = (uploadType:'image' | 'audio', uplFile:UploadFile, url: string)
:Promise< ImageNew | Audio> => {
if (uploadType === 'audio') {
Expand All @@ -90,55 +87,53 @@ const FileUploader:React.FC<Props> = ({
.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) {
onSuccessUpload(respones, file);
}
})
.catch((err) => {
if(onError){
if (onError) {
onError(err);
}
});
};

const file = options.file as RcFile;

if (file) {
reader.readAsDataURL(file);
}

};

return (
<Upload
{...uploadProps}
customRequest={customRequest}
onChange={onUploadChange}
data-testid={"fileuploader"}
data-testid="fileuploader"
>
{children}
</Upload>
Expand Down
2 changes: 1 addition & 1 deletion src/features/AdminPage/CategoriesPage/CategoriesPage/CategoryAdminModal.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const SourceModal: React.FC<SourceModalProps> = ({
]}
>
<FileUploader
greyFilterForImage
enableGrayscale
multiple={false}
accept=".jpeg,.png,.jpg,.webp"
listType="picture-card"
Expand Down
5 changes: 4 additions & 1 deletion src/features/AdminPage/NewStreetcode/MainBlock/FileInputsPart.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { FormInstance, Modal, UploadFile } from 'antd';
import { UploadChangeParam } from 'antd/es/upload';
import FormItem from 'antd/es/form/FormItem';

import { RuleObject } from 'antd/es/form';
import AudiosApi from '@/app/api/media/audios.api';
import ImagesApi from '@/app/api/media/images.api';
import FileUploader from '@/app/common/components/FileUploader/FileUploader.component';
Expand All @@ -21,7 +22,6 @@ import Audio, { AudioUpdate } from '@/models/media/audio.model';

import PreviewFileModal from './PreviewFileModal/PreviewFileModal.component';
import imageValidator, { checkImageFileType } from '@/app/common/components/modals/validators/imageValidator';
import { RuleObject } from 'antd/es/form';

const convertFileToUploadFile = (file: Image | Audio) => {
const newFileList: UploadFile = {
Expand Down Expand Up @@ -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)]);
Expand Down Expand Up @@ -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)]);
Expand All @@ -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');
Expand Down

0 comments on commit 89737b5

Please sign in to comment.