0

estoy haciendo la sgte app: SCamfie , necesito ayuda para actualizar la imagen de cada usuario, debe funcionar algo así. Cuando se hace click en el boton del lapiz o editar, en la imagen del usuario y de fondo aparece una camara, esta camara es un input file para poder subir una nueva imagen y reemplazarla.

A continuacion tengo dos problemas: uno que la imagen si se reemplaza correctamente, el problema uno radica que cuando le das en el check, aparece un mensaje de que si desea aplicar los cambios, cuando le das en la equis, sigue manteniendo la imagen nueva y no vuelve a la anterior. Practicamente deberia cambiar solo la imagen si aplicas los cambios sino mantenerla en la que esta. Entonces ¿Como puedo aplicar nuevos cambios o volver a la imagen anterior dependiendo de la respuesta?.

Ahora mi segundo problema radica que, al dar click en una imagen de usuario, te aparece una ventana modal en la cual aparece la imagen del usuario dependiendo del cual es clickeado pero al actualizar la imagen desde el input file, el atributo src de la imagen no se muestra correctamente. Agradeceria mucho que me pudieran ayudar en esto.

Dejo el componente donde se renderiza cada card user:

import React, { useState } from 'react';
import Icon from '../assets/Icon';
import LoadImage from '../assets/LoadImage';
import Swal from 'sweetalert2';

const ListFriendships = props => {
  const {
    fondoImagen,
    imagenUsuario,
    showModal
  } = props;

  const [edit, setEdit] = useState(false),
  [showCamera, setShowCamera] = useState(false),
  [applyChanges, setApplyChanges] = useState(true),

  loadImage = e => {
    const newImg = e.target.parentElement.parentElement.querySelector('img');
    const imageActual = e.target.parentElement.parentElement.querySelector('img').src;
    const file = e.target.parentElement.querySelector('input[type="file"]').files[0];
    const reader = new FileReader();
    
    if (applyChanges){
    reader.addEventListener('load', () => {
      newImg.src = reader.result;
      setShowCamera(false);
    })
    file && reader.readAsDataURL(file);
    } else {
      return null;
    }
  },
  
  confirmLoadImage = () =>{

    Swal.fire({
      html: `<h3 id="applyChanges">¿Desea aplicar los cambios?</h3>`,
      background: 'rgba(0,0,0,0.85)',
      showDenyButton: true,
      confirmButtonText: '<i class="fas fa-check" id="apply-changes-check"></i>',
      denyButtonText: '<i class="fas fa-times"></i>',
      confirmButtonColor: '#12A002',
      denyButtonColor: '#A80000',
    }).then((result) => {
      if (result.isConfirmed) {
        return setApplyChanges(true);
      } else if (result.isDenied) {
        return setApplyChanges(false);
      }
    })   
  }

  return (
    <div className="person">

      <article className="image-person">

        <img className="background-image" src={`${process.env.PUBLIC_URL}/${fondoImagen}`} alt="background" />

        {showCamera
          ? <LoadImage
            onChange={e => loadImage(e)}
            id="file"
          />
          : null}

      </article>

      <article className="name-person">
        {!edit
          ? <Icon title="Editar" className="fas fa-edit"
          onClick={() => {
            setEdit(true);
            setShowCamera(true);
          }} />
          : <Icon title="Aplicar cambios" className="fas fa-check" onClick={() => { setEdit(false); confirmLoadImage() }} />
        }
        <Icon title="Eliminar" className="fas fa-trash" onClick={props.deleteFriendship} />
        <figure>
          <img src={`${process.env.PUBLIC_URL}/${imagenUsuario}`} alt={nombreDeUsuario} title={nombreDeUsuario} onClick={showModal} />

          {showCamera
            ? <LoadImage
            onChange={e => loadImage(e)}
            id="file1"
          />
          : null}

        </figure>
        
    </div>
  )
};

export default ListFriendships;

He cortado el componente para poder ir al grano, el metodo loadImage es el encargado de actualizar la imagen, uso SweetAlert2 para generar los mensaje de confirmacion. Este el componente encargado de renderizar la ventana modal:

import './css/modal.css';
import Icon from '../assets/Icon';

const Modal = props =>{
  const {onClick, objectJson, i} = props;
  return(
    <div id="wrap">
      <Icon className="fas fa-times" id="cancel" onClick={onClick} />
      <img src={process.env.PUBLIC_URL+"/"+objectJson[i].imagenUsuario} alt={objectJson[i].nombreDeUsuario} title={objectJson[i].nombreDeUsuario} />
    </div>
  )
}

export default Modal;

En el componente Modal uso process.env.PUBLIC_URL + "/" + objectJson[i].imagenUsuario para mostrar cada imagen dependiendo de la imagen de usuario clickeada. Ahora cuando uso process.env.PUBLIC_URL esto me limita solo a las imagenes que esten dentro de la ubicacion del index.html. Si una imagen que no radica alli, me lo tomara como invalida. Ahora en el componente <Friendship /> renderizo los dos anteriores:

import React, { useState } from 'react';
import './css/styles.css';

/* Components */
import ListFriendships from './ListFriendships';
import Modal from './Modal';

/* JSON */
import friendships from '../json/friendships';

/* Librarys */
import Swal from 'sweetalert2';

const Friendship = () => {

  const [person, setPerson] = useState(friendships),
    [showModal, setShowModal] = useState({
      condition: false,
      index: 0
    });

  return (

    <div id="container">

      { showModal.condition === true
        ? <Modal
          objectJson={person}
          onClick={() => setShowModal({
            ...showModal,
            condition: false
          })}
          i={showModal.index}
        />
        : null
      }

      <section id="friendships">
        <h3>Tu lista de amistades :</h3>
        <div id="content-person">
          {person.map((x, index) => (
              <ListFriendships
                key={index}
                fondoImagen={x.fondoImagen}
                imagenUsuario={x.imagenUsuario}
                showModal={() => setShowModal({
                  condition: true,
                  index: index
                })}
                }}
              />
            ))
          }
        </div>
      </section>

    </div>
  )
}

export default Friendship;

Aca pueden ver los componentes de la app, Espero que haya quedado claro lo que deseo realizar, Gracias !!

1 respuesta 1

1

Veo que utilizas bastante el DOM para obtener valores, con React no te recomiendo demasiado usar esto, los problemas que tienes se pueden solucionar con mas uso de hooks.

Te digo como solucionaría los problemas que te pasan:

Para controlar la foto que se cambia y que vuelva a la original si no aplicas cambios:

Donde defines las constantes, hacemos una para controlar el src de la imagen nueva:

const [newImg, setNewImg] = useState(null);

Donde lees la imagen nueva que se ha introducido, en vez de modificar el src del elemento de la imagen, seteas newImg:

reader.addEventListener('load', () => {
          setNewImg(reader.result);
          setShowCamera(false);
})

Donde controlas si has confirmado o no los cambios, en caso de que no confirmes, limpias el valor de newImg:

if (result.isConfirmed) {
   return setApplyChanges(true);
} else if (result.isDenied) {
   setNewImg(null);
   return setApplyChanges(false);
}

Y donde muestras la imagen simplemente haces que si newImg tiene valor, utilize ese valor, si no, cargue la imagen que tenia:

<img src={newImg ? newImg : process.env.PUBLIC_URL + "/" + imagenUsuario} alt={nombreDeUsuario} title={nombreDeUsuario} onClick={showModal} />

Con esto quedaría resuelto, ahora bien por lo que veo no se guarda en ningún sitio, si haces un f5, se pierden los cambios, en caso de que se tuviera que guardar la imagen, toda la estructura debería cambiar un poco.

Para arreglar lo del modal, deberías hacer llegar la nueva imagen al componente Modal, podrías hacerlo así:

En el onClick de la imagen:

onClick={() => showModal(newImg)}

En Friendship.js donde envías showModal:

 showModal={(newImg) => setShowModal({
                  condition: true,
                  index: index,
                  newImg: newImg
                })}

Donde renderizas Modal:

{ showModal.condition === true
        ? <Modal
          objectJson={person}
          onClick={() => setShowModal({
            ...showModal,
            condition: false
          })}
          i={showModal.index}
          newImg={showModal.newImg}
        />
        : null
      }

Y el Modal quedaría así:

const Modal = props => {
  const { onClick, objectJson, i, newImg } = props;
  return (
    <div id="wrap">
      <Icon className="fas fa-times" id="cancel" onClick={onClick} />
      <img src={newImg ? newImg : process.env.PUBLIC_URL + "/" + objectJson[i].imagenUsuario} alt={objectJson[i].nombreDeUsuario} title={objectJson[i].nombreDeUsuario} />
    </div>
  )
}
2
  • Vale, analizare tu respuesta mas tarde, en este momento no estoy en mi laptop
    – Husdady
    el 14 feb. 2021 a las 20:07
  • tu respuesta me ayudo a solucionar algunas cosas, tuve que hacer otras validaciones para arreglar unos problemas que aparecian despues de actualizar las imagenes de usuario o fondo. Estoy a punto de terminar esa app. me falta solucionar un pequeño problema, si deseas ayudarme: es.stackoverflow.com/questions/428809/…
    – Husdady
    el 16 feb. 2021 a las 23:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.