Espero explicación no sea muy confusa. Estoy trabajando con el MEAN STACK, en mi aplicación web tengo un componente que me permite editar los datos del usuario, en dichos datos el usuario puede subir una imagen de perfil.
Cuando el usuario es nuevo obviamente no tiene ninguna imagen, cuando el usuario sube su imagen por primera vez esta imagen se guarda en una carpeta de mi backend llamada users, cuando el usuario ya tiene una imagen y quiere actualizar lo que sucede es que la nueva imagen se guarda en la carpeta users y la imagen vieja también se queda ahí.
Lo que yo quisiera es que la imagen vieja sea sustituida o eliminada cuando el usuario actualice la imagen. Espero puedan compartirme ideas o ejemplos.
CONTROLLERS:
'use strict'
var Usuarios = require('../dao/usuarios');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const SECRET_KEY = 'secretkey123456';
var fs = require('fs');
var path = require('path');
var controller = {
// METODO PARA REGISTRAR USUARIO
RegistroUsuarios: function(req, res) {
const newUser = {
name: req.body.name,
nickname: req.body.nickname,
email: req.body.email,
password: bcrypt.hashSync(req.body.password)
}
Usuarios.create(newUser, (err, user) => {
if(err && err.code === 11000){
return res.status(409).send({ message: 'Algo anda mal' });
}
if(err){
return res.status(500).send({ message: 'Error del servidor' });
}
const expiresIn = 24 * 60 * 60;
const accessToken = jwt.sign({ id: user.id },
SECRET_KEY, {
expiresIn: expiresIn
});
const dataUser = {
_id: user.id,
accessToken: accessToken,
expiresIn: expiresIn
}
// response
res.send({ dataUser });
});
},
// METODO PARA INICIAR SESIÓN
loginUser: function(req, res, next){
const userData = {
email: req.body.email,
password: req.body.password
}
Usuarios.findOne({ email: userData.email }, (err, user) => {
if (err){
return res.status(500).send({ message: 'Error del servidor' });
}
if (!user){
//No existe el email
res.status(409).send({ message: 'Algo anda mal' });
}else{
const resultPassword = bcrypt.compareSync(userData.password, user.password);
if(resultPassword){
const expiresIn = 24 * 60 * 60;
const accessToken = jwt.sign({ id: user.id }, SECRET_KEY, { expiresIn: expiresIn });
const dataUser = {
_id: user.id,
accessToken: accessToken,
expiresIn: expiresIn
}
// response
res.send({ dataUser });
}else{
//Contraseña incorrecta
res.status(409).send({ message: 'Algo anda mal' });
}
}
});
},
// METODO PARA MOSTRAR TODOS LOS USUARIOS REGISTRADOS
getUsers: function(req, res){
Usuarios.find({}).sort('name').exec((error, users) =>{
if(error){
return res.status(500).send({ message: 'Error al devolver los datos' });
}
if(!users){
return res.status(404).send({ message: 'No hay usuarios para mostrar' });
}
return res.status(200).send({ users });
});
},
// METODO PARA MOSTRAR UN USUARIO
getUser: function(req, res){
var userId = req.params.id;
if(userId == null){
return res.status(404).send({ message: 'El proyecto no existe' });
}
Usuarios.findById(userId, (err, user) =>{
if(err){
return res.status(500).send({ message: 'Error al devolver los datos' });
}
if(!user){
return res.status(404).send({ message: 'El usuario no existe' });
}
return res.status(200).send({ user });
});
},
// METODO PARA ACTUALIZAR USUARIO
updateUser: function(req, res){
var userId = req.params.id;
var update = req.body;
Usuarios.findByIdAndUpdate(userId, update, {new:true}, (error, userUpdate) =>{
if(error && error.code === 11000){
return res.status(409).send({ message: 'El correo ya existe' });
}
if(error){
return res.status(500).send({ message: 'Error al actualizar' });
}
if(!userUpdate){
return res.status(404).send({ message: 'No hay proyectos para actualizar' });
}
return res.status(200).send({ user: userUpdate });
});
},
// METODO PARA ELIMINAR USUARIO
deleteUser: function(req, res){
var usertId = req.params.id;
Usuarios.findByIdAndDelete(usertId, (error, userDelete) =>{
if(error){
return res.status(500).send({ message: 'Error al borrar' });
}
if(!userDelete){
return res.status(404).send({ message: 'No hay proyectos para borrar' });
}
return res.status(200).send({ user: userDelete });
});
},
// METODO PARA SUBIR IMAGEN DE PERFIL DEL USUARIO
uploadImage: function(req, res){
var userId = req.params.id;
var fileName = 'Imagen no subida...';
if(req.files){
var filePath = req.files.image.path;
var fileSplit = filePath.split('\\');
var fileName = fileSplit[1];
var extSplit = fileName.split('\.');
var fileExt = extSplit[1];
if(fileExt == 'png' || fileExt == 'PNG' || fileExt == 'jpg' || fileExt == 'JPG' || fileExt == 'png' || fileExt == 'jpeg' || fileExt == 'JPEG' || fileExt == 'gif' || fileExt == 'GIF'){
Usuarios.findByIdAndUpdate(userId, {image: fileName}, {new:true}, (error, userUpdate) =>{
if(error){
return res.status(500).send({ message: 'La imagen no se ha subido' });
}
if(!userUpdate){
return res.status(404).send({ message: 'No hay proyecto para agregarle imagen' });
}
return res.status(200).send({ user: userUpdate });
});
}else{
fs.unlink(filePath, (error) =>{
return res.status(200).send({ message: 'La extension no es valida' });
});
}
}else{
return res.status(200).send({ message: fileName });
}
},
// METODO PARA MOSTRAR LA IMAGEN
getImageFile: function(req, res){
var file = req.params.image;
var path_file = './users/'+file;
fs.exists(path_file, (exists) => {
if(exists){
return res.sendFile(path.resolve(path_file));
}else{
return res.status(200).send({ message: "No existe la imagen" });
}
});
}
};
//Exportamos el JSON de metodos o funciones para
module.exports = controller;
EDIT.COMPONENT.TS:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Usuarios } from '../../models/usuarios';
import { UsuariosService } from '../../service/usuarios.service';
import { Global } from '../../service/global';
import { UploadService } from '../../service/upload.service';
declare var $:any;
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css'],
providers: [UsuariosService, UploadService]
})
export class EditComponent implements OnInit {
public user: Usuarios;
public fileUpload: Array<File>;
public save_user;
public url: string;
public mensaje_Error: any;
constructor(
private _userService: UsuariosService,
private _uploadService: UploadService,
private _router: Router,
private _route: ActivatedRoute
) {
this.url = Global.url;
}
ngOnInit() {
this._route.params.subscribe(params => {
let id = params.id;
this.getUser(id);
});
}
getUser(id){
this._userService.getUser(id).subscribe(
response =>{
this.user = response.user;
},
error =>{
console.log(<any>error);
}
);
}
// METODO PARA GUARDAR LOS NUEVOS CAMBIOS
onSubmit(userForm){
this._userService.editUser(this.user).subscribe(
response =>{
if(response.user){
if(this.fileUpload){
this._uploadService.SolicitudArchivo(Global.url+"/image-user/"+response.user._id, [], this.fileUpload, 'image').then((result:any) => {
this.save_user = result.user;
this._router.navigateByUrl('/perfil');
});
}else{
this.save_user = response.user;
this._router.navigateByUrl('/perfil');
}
}else{
// this.status = 'failed';
}
},
error =>{
console.log(<any>error);
this.MensajeError();
this.mensaje_Error = error.error.message;
}
);
}
// METODO PARA EXTRAER LA IMAGEN DEL TARGET
ArchivosEvent(fileInput: any){
this.fileUpload = <Array<File>>fileInput.target.files;
}
// METODO QUE SIRVE PARA MOSTRAR UN MENSAJE DE ERROR CUANDO LOS DATOS DE LOGIN NO SEAN CORRECTOS
MensajeError(){
setTimeout(function() {
$("#mensajeError").fadeIn(100); //-> Muestra el mensaje en 300 milisegundos
},300);
setTimeout(function() {
$("#mensajeError").fadeOut(3000); //-> Cierra el mensaje despues de los 3 segundos
},3000);
}
}
UPLOAD.SERVICE.TS:
import { Injectable } from '@angular/core';
import { Global } from './global';
@Injectable()
export class UploadService{
public url: string;
constructor(){
this.url = Global.url;
}
SolicitudArchivo(url: string, params: Array<string>, files: Array<File>, name: string){
return new Promise(function(resolve, reject){
var formData:any = new FormData();
var xhr = new XMLHttpRequest();
for(var i=0; i<files.length; i++){
formData.append(name, files[i], files[i].name);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
resolve(JSON.parse(xhr.response));
}else{
reject(xhr.response);
}
}
}
xhr.open('POST', url, true);
xhr.send(formData);
});
}
}