NapCatQQ/packages/napcat-webui-frontend/src/components/input/image_input.tsx

import { Button } from '@heroui/button';
import { Image } from '@heroui/image';
import { Input } from '@heroui/input';
import { useRef } from 'react';

export interface ImageInputProps {
  onChange: (base64: string) => void;
  value: string;
  label?: string;
}

const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <div className='flex items-end gap-2'>
      <div className='w-5 h-5 flex-shrink-0'>
        <Image
          src={value}
          alt={label}
          className='w-5 h-5 flex-shrink-0 rounded-none'
        />
      </div>
      <Input
        ref={inputRef}
        label={label}
        type='file'
        placeholder='选择图片'
        accept='image/*'
        classNames={{
          inputWrapper:
            'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
          input: 'bg-transparent text-default-700 placeholder:text-default-400',
        }}
        onChange={async (e) => {
          const file = e.target.files?.[0];
          if (file) {
            const reader = new FileReader();
            reader.onload = async () => {
              const base64 = reader.result as string;
              onChange(base64);
            };
            reader.readAsDataURL(file);
          }
        }}
      />
      <Button
        onPress={() => {
          onChange('');
          if (inputRef.current) inputRef.current.value = '';
        }}
        color='primary'
        variant='flat'
        size='sm'
      >
        删除
      </Button>
    </div>
  );
};

export default ImageInput;