Add new keys

This commit is contained in:
Nicola Benaglia
2025-05-25 00:15:06 +02:00
parent 7d45e02457
commit 84f7a31f22
10 changed files with 87 additions and 61 deletions

View File

@@ -1,44 +1,48 @@
import React, { useCallback } from 'react'
import { Box } from '@mui/material'
import { useDropzone, DropzoneRootProps, DropzoneInputProps } from 'react-dropzone'
import Compressor from 'compressorjs'
import React, { useCallback } from 'react';
import { Box } from '@mui/material';
import {
useDropzone,
DropzoneRootProps,
DropzoneInputProps,
} from 'react-dropzone';
import Compressor from 'compressorjs';
const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => {
reject(error)
}
})
reject(error);
};
}); // TODO toBase64 seems unused. Remove?
interface ImageUploaderProps {
children: React.ReactNode
onPick: (file: File) => void
children: React.ReactNode;
onPick: (file: File) => void;
}
const ImageUploader: React.FC<ImageUploaderProps> = ({ children, onPick }) => {
const onDrop = useCallback(
async (acceptedFiles: File[]) => {
if (acceptedFiles.length > 1) {
return
return;
}
const image = acceptedFiles[0]
let compressedFile: File | undefined
const image = acceptedFiles[0];
let compressedFile: File | undefined;
try {
// Check if the file is a GIF
if (image.type === 'image/gif') {
// Check if the GIF is larger than 500 KB
if (image.size > 500 * 1024) {
console.error('GIF file size exceeds 500KB limit.')
return
console.error('GIF file size exceeds 500KB limit.');
return;
}
// No compression for GIF, pass the original file
compressedFile = image
compressedFile = image;
} else {
// For non-GIF files, compress them
await new Promise<void>((resolve) => {
@@ -48,55 +52,55 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({ children, onPick }) => {
mimeType: 'image/webp',
success(result) {
const file = new File([result], image.name, {
type: 'image/webp'
})
compressedFile = file
resolve()
type: 'image/webp',
});
compressedFile = file;
resolve();
},
error(err) {
console.error('Compression error:', err)
resolve() // Proceed even if there's an error
}
})
})
console.error('Compression error:', err);
resolve(); // Proceed even if there's an error
},
});
});
}
if (!compressedFile) return
if (!compressedFile) return;
onPick(compressedFile)
onPick(compressedFile);
} catch (error) {
console.error('File processing error:', error)
console.error('File processing error:', error);
}
},
[onPick]
)
);
const {
getRootProps,
getInputProps,
isDragActive
isDragActive,
}: {
getRootProps: () => DropzoneRootProps
getInputProps: () => DropzoneInputProps
isDragActive: boolean
getRootProps: () => DropzoneRootProps;
getInputProps: () => DropzoneInputProps;
isDragActive: boolean;
} = useDropzone({
onDrop,
accept: {
'image/*': []
}
})
'image/*': [],
},
});
return (
<Box
{...getRootProps()}
sx={{
display: 'flex'
display: 'flex',
}}
>
<input {...getInputProps()} />
{children}
</Box>
)
}
);
};
export default ImageUploader
export default ImageUploader;

View File

@@ -7,34 +7,34 @@
}
.lds-ellipsis {
display: inline-block;
height: 80px;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
animation-timing-function: cubic-bezier(0, 1, 1, 0);
background: currentColor;
border-radius: 50%;
height: 13.33333px;
position: absolute;
top: 33.33333px;
width: 13.33333px;
height: 13.33333px;
border-radius: 50%;
background: currentColor;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
left: 8px;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
left: 8px;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
left: 32px;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
left: 56px;
}
@keyframes lds-ellipsis1 {