Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { useFormContext } from 'react-hook-form';

import { Button, IconButton, Box, Typography } from '@mui/material';

import { styled } from '@mui/material/styles';

import PhotoCamera from '@mui/icons-material/PhotoCamera';

import DeleteIcon from '@mui/icons-material/Delete';

const VisuallyHiddenInput = styled('input')({

  clip: 'rect(0 0 0 0)',

  clipPath: 'inset(50%)',

  height: 1,

  overflow: 'hidden',

  position: 'absolute',

  bottom: 0,

  left: 0,

  whiteSpace: 'nowrap',

  width: 1

});

export function FormImagePicker({ name, label, ...rest }) {

  const {

    register,

    setValue,

    watch,

    formState: { errors }

  } = useFormContext();

  const [previewImage, setPreviewImage] = useState(null);

  const watchedImage = watch(name);

  const handleChange = (event) => {

    const file = event.target.files?.[0];

    if (file) {

      setValue(name, file);

      const reader = new FileReader();

      reader.onloadend = () => {

        setPreviewImage(reader.result);

      };

      reader.readAsDataURL(file);

    }

  };

  const handleRemove = () => {

    setValue(name, null);

    setPreviewImage(null);

  };

  return (

    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>

      <Typography component='label' htmlFor={name} sx={{ display: 'block', mb: 1 }}>

        {label}

      </Typography>

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>

        <Button component='label' variant='outlined' startIcon={<PhotoCamera />}>

          Subir Imagen

          <VisuallyHiddenInput

            id={name}

            name={name}

            type='file'

            onChange={handleChange}

            {...register(name)}

            {...rest}

          />

        </Button>

        {previewImage && (

          <Box sx={{ position: 'relative' }}>

            <img

              src={previewImage}

              alt='Vista previa'

              style={{ height: 100, width: 100, objectFit: 'cover' }}

            />

            <IconButton

              aria-label='eliminar'

              size='small'

              onClick={handleRemove}

              sx={{

                position: 'absolute',

                top: -10,

                right: -10,

                backgroundColor: 'white',

                '&:hover': { backgroundColor: 'lightgray' }

              }}

            >

              <DeleteIcon fontSize='inherit' />

            </IconButton>

          </Box>

        )}

        {watchedImage instanceof File && !previewImage && (

          <Typography variant='caption' color='text.secondary'>

            Archivo seleccionado: {watchedImage.name}

          </Typography>

        )}

      </Box>

      {errors[name] && (

        <Typography variant='caption' color='error'>

          {errors[name]?.message}

        </Typography>

      )}

    </Box>

  );

}