mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-31 06:01:24 +00:00
Add new keys
This commit is contained in:
@@ -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;
|
||||
|
@@ -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 {
|
||||
|
Reference in New Issue
Block a user