3

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);
		});
	}
}

2 respuestas 2

4

En tu controller importas fs (file system)

const fs = require("fs")

Dentro de la logica:


if (fs.existsSync(pathViejo)) fs.unlinkSync(pathViejo)

Después de esta linea puedes volver a guardar la fotografía como lo estas haciendo hasta ahora.

Ten mucho cuidado de que tu pathViejo no tenga caracteres especiales o espacios. Esto te puede acarrear problemas para encontrar y eliminar la foto. Lo que yo suelo hacer es cambiar el nombre de la foto (conservando la extensión) y poner el id del usuario, así requiere menos trabajo.


Explicacion

fs.existSync() Comprueba si verdaderamente existe el fichero, de lo contrario la siguiente linea daria error.

fs.unlinkSync() Elimina el fichero que sabemos que existe.

Ambas operaciones son sincronas para evitar crear una nueva promesa o callback dentro del controller.

Puedes encontrar mas información al respecto aqui.

3
  • Funcionó de maravilla, muchas gracias.
    – Carlos
    Commented el 1 dic. 2019 a las 0:11
  • Una última pregunta, Para eliminar la imagen de la carpeta users cuando un usuario es eliminado ¿Es el mismo proceso?
    – Carlos
    Commented el 1 dic. 2019 a las 0:36
  • Básicamente si. Solo que tú lógica debería de ir (a mi gusto) en un pre remove para no perder la referencia.
    – Legna
    Commented el 1 dic. 2019 a las 1:26
-1

Puedes renombrar el archivo que subes, con el id del cliente, luego, podes verificar la existencia del mismo, mediante la _file_exists_ de php.

<?php

    $nombre_fichero = '/path/to/foo.txt';

    if (file_exists($nombre_fichero)) {
      echo "El fichero $nombre_fichero existe";
       rename($nombre_fichero.$idcliente, "/ficheroBK/");
       // subir la nueva imagen
    } else {
      echo "El fichero $nombre_fichero no existe";
    }

    ?>
1
  • En ningún momento se ha mencionado que el lenguaje que se está manejando es php, por lo tanto esta respuesta no es la adecuada.
    – DaxTter77
    Commented el 29 nov. 2019 a las 16:48

Tu Respuesta

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

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