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 !!