Subiendo la foto a nuestro servidor web

Clase 33 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram-26.zip?raw=true

EdwinDeLeonG

student•

He notado que luego de subir la foto el formulario se queda con la foto y no hace un reset, si quieres que luego de subir la foto el formulario te permita seguir subiendo otras fotos, agrega en el END de la función onsubmit esto:

toggleButtons();
document.getElementById('formUpload').reset();

Asi la funcion completa queda de esta forma:

function onsubmit(ev) {
    ev.preventDefault();

    var data = new FormData(this);
    request
    .post('/api/pictures')
    .send(data)
    .end(function (err, res){
      console.log(err, res);
      toggleButtons();
      document.getElementById('formUpload').reset();
    })
  }

Sebastian Diaz

student•

o se podria llamar la funcion cancel, que ya realiza estas dos opciones (Y)

Gabriel Alejandro Nuñez Natera

student•

Para los que estan usando git en el proyecto, es una mala idea que las fotos que se suban en la carpeta uploads se guarden tambien en git, ademas la carpeta uploads debe existir en el proyecto, para que no ocurra ningun error al momento de subir una foto. Se tiene que guardar la carpeta en git, ignorando las fotos que se suban dentro de la misma.

Git no guarda carpetas, solo archivos, por lo que crear la carpeta en el proyecto no basta para que git la reconozca. Para solventar esto pueden hacer lo siguiente:

Crear un archivo que sirva de ‘placeholder’ en la carpeta uploads, para que git reconozca esta carpeta:

uploads/
	.empty

Nota: Puede ser un archivo con cualquier nombre y extension, en este caso decidi llamarlo ‘.empty’

Agregar lo siguiente en el archivo .gitignore:

uploads/*
!uploads/.empty

De esta forma git va a ignorar todos los archivos que esten en la carpeta uploads, excepto nuestro archivo ‘placeholder’.

Espero que esto les sea util 😃

Oliver Amezquita Morales

student•

para la subida de imagenes ya se pasan de lanza y quieren subir fotos de 10 megas, ya no sirve para nada esta subida de archivos, lo mejor es utilizar cloudinary les dejo el link:

erick blanco

student•

que es exactamente cloudinary? una libreria?

Paul Alarcon

student•

O podrías hacer una conversión de las imágenes como hace whatsapp, al cargar fotos de tu teléfono. Así no tendrías el problema de almacenamiento que te generaría imágenes de 10 mb

Yoel Velasquez Valencia Velasquez

student•

Solo funciona con .jpg, al intentar subir .png sube como 4 imágenes pero en blanco.

Omar Andrés Plata Parra

student•

Aporte: A mi no me sirvió la librería file-extension, pero lo solucioné con esta función:

function ext (archivo){
	var extension = (archivo.substring(archivo.lastIndexOf('.'))).toLowerCase();
		return extension;
}

Les retornará la extensión del archivo con el ‘.’ así que en la configuración del storage deben colocar la linea de filename así:

cb(null, +Date.now() + ext(file.originalname));

Alejandro Roa

student•

En una aplicación de la vida real, es recomendable guardar las imágenes en nuestro servidor? o usar algún servicio que nos permita este proceso?

Fernando Contreras

student•

mucho depende de tu proyecto, si estaras almacenando muchas imagenes constantemente seria bueno pensar utilizar algun servicio, si guardas relativamente pocas imagenes no creo que tengas problema con tenerlo en tu servidor.

Álvaro René Sánchez Serrano

student•

Si continuas con el curso de backend de nodejs . se hace una modificación en donde ahora subes los arhivos a amzon web services . especificamente a amazon S3.

Braulio Toledo

student•

Hola
Para los que tienen este error:
express deprecated res.send(status, body): Use res.status(status).send(body) instead src/server/index.js

Se resuelve de la siguiente manera:
(

Denle una repasada a a este link
para saber que estatus usar o a la api de expressjs ahi viene

Armando Aguilar L.

student•

Para upload de fotos formidable facil de usar:

Alberto Moncada

student•

Aquí les dejo esta mejora:

Si quieren hacerle ver al usuario que la foto se subió:
agreguen después de la etiqueta <form> esta etiqueta <span>

<span id="fotoUpExito" class="hide">La foto se ha Subido!</span>

y
en la función onsubmit, agrégale las siguientes lineas de código:

document.getElementById("fotoUpExito").classList.toggle("hide");
//  Hacemos aparecer el rotulito que le avisa al usuario que la foto se ha Subido. Esto se encuentra en la etiqueta "span" debajo de la etiqueta “form”.

setTimeout(function(){
document.getElementById("fotoUpExito").classList.toggle("hide");
}, 2000)
// Con esta función RETRASADA, quitamos el rotulito que previamente mostramos al usuario, ya que no hay necesidad de que permanezca ahí visible.

Importante antes de estas lineas debemos agréguenle a la función onsubmit, las siguientes lineas de código:

toggleButtons();
document.getElementById('formUpload').reset();

efectivamente a como lo aporta “EdwinDeLeonG”, esto es para resetear la info del “form” y volver a re-aparecer el botón de “Subir Foto”.

Enrique Cardoza Cardoza

student•

Llevo un buen rato sin poder corregir este error y la verdad se ha hecho algo estresante. He repetido el vídeo varias veces y no veo el error.

Si alguien pudiera ayudar, se lo agradecería bastante.

client.js:841 POST http://localhost:3000/api/pictures 500 (Internal Server Error)Request.end @ client.js:841onsubmit

@ src\homepage\template.js:52 src\homepage\template.js:53 [Error: Internal Server Error   at Request.<anonymous>

(http://localhost:3000/app.js:20305:19) …, Response]

Otra cosa que también quería comentar es que en la línea de comandos me aparece;

express deprecated res.send(status, body): Use res.status(status).send(body) instead server.js:69:15

Y sugiere que en lugar de:

res.send(500, "Error uploading file");

se coloque:

res.status(500).send("Error uploading file");

en el serve.js

Y respecto al polyfill de babel. Font-awesome parece que interfiere en algo porque me aparece:

Uncaught Error: only one instance of babel-polyfill is allowed

Tal vez sean errores míos, pero les agradecería de todas maneras que me comenten qué podría ser lo que va mal.

Gracias.

Rubén Rangel

student•

lograste resolver estos errores?

Junior Evani Lizama

student•

ayuda con este error !

Julián Andrés Giraldo

student•

Hola, para una aplicación como esta que es mejor, almacenar las imagenes en una base de datos como binarios CLOB o BLOB o almacenarlas en el sistema de archivos del servidor y solo guardar en base de datos la referencia a ellos?, esa duda la tengo desde hace tiempo, alguien me puede ayudar a aclarar cual es la mejor manera de manejar imágenes en una app como esta del lado del servidor?

Diego Forero

Team Platzi•

No es una buena practica almacenar binarios en la base de datos ya que ademas de hacer aumentar mucho el tamaño de la base de datos la lectura de estos campos es más lenta y puede influir en el rendimiento de tu aplicación, lo mejor es como lo mencionas guardar usando el sistema de archivo y solo almacenar en la base de datos la ruta donde esta almacenado el binario.

Diego Diaz

student•

Hola comunidad, me podrian dar una mano, no logro que la foto que subo se valla a la carpeta uploads, y en la consola no me muestra ningun error… podria alguien decirme en que estoy fallando?, mil gracias por cualquier ayuda!

var express = require('express');
var multer  = require('multer');
var ext = require('file-extension');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    cb(null, +Date.now() + '.' + ext(file.originalname))
  }
})

var upload = multer({ storage: storage }).single('picture');
var app = express();

app.set('view engine', 'pug');

app.use(express.static('public'));





app.get('/', function(req, res) {
	res.render('index', {title: 'Traif'});
})
app.get('/pruebas', function(req, res) {
	res.render('index', {title: 'Pruebas'});
})



app.get('/api/pictures', function (req, res, next) {
	var pictures = [
		{
			user: {
				username: 'Dkong',
				avatar: 'http://www.revistavicio.com/wp-content/uploads/2016/02/002_men_will_smith_m-1.jpg'
			},
			url: 'partitura.png',
			likes: 2000,
			liked: true,
			createdAt: new Date()
		},
		{
			user: {
				username: 'Damilo',
				avatar: 'https://pbs.twimg.com/profile_images/788376275941548032/tt6VvYh2.jpg'
			},
			url: 'partitura.png',
			likes: 0,
			liked: false,
			createdAt: new Date().setDate(new Date().getDate() - 1)
		}
	];
	setTimeout(function(){
		res.send(pictures);
	}, 2000)
});

app.post('/api/pictures', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.send(508, "Error uploading file");
    }
    res.send('File uploaded');
  })
})

app.listen(3000, function(err) {
	if (err)
		return console.log('Hubo un error'),
		process.exit(1);
	console.log('Traif vive / puerto 30k00 ');
})

Edwin Anciani

student•

Busca en el tab network de tu developer tools de Chrome a ver a donde esta haciendo el Request.

Juan Guillermo Rivera Orozco

student•

Hola buenas tardes, quisiera saber si alguien me puede ayudar con el siguiente error, llevo ya 2 días sin poder resolverlo y la verdad no sé qué pueda tener malo.

En la consola del navegador aparece así:

Y cuando voy a ver el código, me dice que en la línea 23953 de app.jss (donde se encuentra el cursor) es donde está el error

Agradecería a quien pudiera colaborarme y muchas gracias.

Jeisson A. Valderrama

student•

Sin duda, la solución para esto
express deprecated res.send(status, body): Use res.status(status).send(body) instead src/server/index.js:85:18

es poner el punto, o mejor dicho cambiar la ubicación del directorio uploads:
cb(null, ‘/uploads’) ==> por cb(null, ‘./uploads’):

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')
  } ```

Carlos Raez

student•

Ee es mi codigo de server.js y no entiendo porque no se me sube la foto a la carpeta uploads

ar express = require('express');
var app = express();
var multer  = require('multer');
var ext = require('file-extension');


var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    cb(null, +Date.now() + '.' + ext(file.originalname))
  }
})

var upload = multer({ storage: storage }).single('picture');



app.set('view engine','pug');

app.use(express.static('public'));

app.get('/', function(req, res){
  res.render('index' , {title: 'Platzigram'})
});

app.get('/signup', function(req, res){
  res.render('index', {title: 'Platzigram-Signup'} )
});



app.get('/signin', function(req, res){
  res.render('index' , {title: 'Platzigram-Signin'})
});

app.get('/api/pictures', function (req, res) {
  var pictures = [
   {
     user: {
       username:'craez',
       avatar:'https://scontent.fmad3-1.fna.fbcdn.net/v/t1.0-1/p240x240/14963358_10210211191868705_77564816987331824_n.jpg?oh=4b2e909c24947498b91da11cd37043d5&oe=58BBCC58',
     },
     url:'office.jpg',
     likes: 0,
     liked: true,
     createAt: new Date(),
   },
   {
     user: {
       username:'craez',
       avatar:'https://scontent.fmad3-1.fna.fbcdn.net/v/t1.0-1/p240x240/14963358_10210211191868705_77564816987331824_n.jpg?oh=4b2e909c24947498b91da11cd37043d5&oe=58BBCC58',
     },
     url:'office.jpg',
     likes: 1,
     liked: true,
     createAt: new Date().setDate(new Date().getDate() - 10),
   }

  ];

setTimeout(function () {
res.send(pictures);
}, 2000 );
})

app.post('/api/pictures', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.send(500, "Error uploading file");
    }
    res.send('File uploaded');
  })
})

app.listen(3000, function(err){
  if(err) return console.log("mierda un error"), process.exit(1);
  console.log("Platzigram escuchando el puerto 3000");
});

Ricardo Azpeitia P.

student•

Te aparece un error?
Estas poniendo esto en tu etiqueta form?
enctype="multipart/form-data"

YSRAEL ROJAS ROJAS

student•

tengo el mismo problema. No se copia la imagen a la carpeta uploads. En la consola no aparece ningún error y todo esta tal cual lo indica el profesor

Juan Guillermo Rivera Orozco

student•

Hola buenas tardes, quisiera saber si alguien podría ayudarme a resolver este error, llevo un par de días intentando y no sé que pueda ser la causa.

En la consola aparece lo siguiente:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

y dentro de app.js esta es la parte donde me señala el error:

1 function onsubmit(ev) {
2   ev.preventDefault();
3   var data = new FormData(this);
4   request
5    .post('/api/pictures')
6    .send(data)
7    .end(function (err, res) {
8       console.log(err, res)
      })
  }

En la línea 8 es donde está el error, eso es lo que dice la consola de Chrome. Ya intenté enviando console.log(arguments) y tampoco me funcionó

Nota: no tengo mucha experiencia con JS, este es mi primer curso avanzado y muchas gracias.

Waldry Diaz Martinez

student•

Te apunta ahí pero no es ese el problema, si ves en la pestaña de ‘network’ de la consola de tu navegador veras que el problema es que no sabe donde llevar el archivo, en pocas palabras el si toma el archivo pero no sabe a donde empujarlo, lo solucione mirando la variable ‘Upload’ de multer y me fije que en el atributo .single tenia (‘pictures’) en ves de (‘picture’)

var upload = multer({ storage: storage }).single('picture');```

Michel González Morales

student•

Les comparto mi experiencia, sobre el mismo error de Internal Error 500 Probe de mil formas.

es ‘./uploads’

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')

La carpeta ‘uploads’ debe estar en la misma altura que ‘assets’, ‘public’, ‘src’ en mi caso mi error era haberla puesto dentro de la carpeta ‘src’, corrigiendo eso, no hubo ningún problema.

Incluso ambos códigos funcionan correctamente:

app.post('/api/pictures', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.send(500, "Error uploading file");
    }
    res.send('File uploaded');
  })
})

Y de la forma que recomienda la terminal:

app.post(’/api/pictures’, function (req, res) {
upload(req, res, function (err) {
if (err) {
return res.status(500).send(“Error uploading file”);
}
res.send(‘File uploaded’);
})
})

Carlos Sampol

Team Platzi•

Muchísimas gracias!

Michel González Morales

student•

¿Haz resuelto tu problema?

Jean Carlo Benavides Pérez

student•

En console indica que fue depresiado el metodo res.send(500, … buscando indica que fue cambiado por lo siguiente:

app.post('/api/pictures', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.status(500).send("Error uploading file");
    }
    res.send('File uploaded');
  })
})```

function onsubmit(ev) {
    ev.preventDefault();

    var data = new FormData(this);
    request
    .post('/api/pictures')
    .send(data)
    .end(function (err, res){
      console.log(err, res);
      toggleButtons();
      document.getElementById('formUpload').reset();
    })
  }

document.getElementById("fotoUpExito").classList.toggle("hide");
//  Hacemos aparecer el rotulito que le avisa al usuario que la foto se ha Subido. Esto se encuentra en la etiqueta "span" debajo de la etiqueta “form”.

setTimeout(function(){
document.getElementById("fotoUpExito").classList.toggle("hide");
}, 2000)
// Con esta función RETRASADA, quitamos el rotulito que previamente mostramos al usuario, ya que no hay necesidad de que permanezca ahí visible.

var express = require('express');
var multer  = require('multer');
var ext = require('file-extension');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    cb(null, +Date.now() + '.' + ext(file.originalname))
  }
})

var upload = multer({ storage: storage }).single('picture');
var app = express();

app.set('view engine', 'pug');

app.use(express.static('public'));





app.get('/', function(req, res) {
	res.render('index', {title: 'Traif'});
})
app.get('/pruebas', function(req, res) {
	res.render('index', {title: 'Pruebas'});
})



app.get('/api/pictures', function (req, res, next) {
	var pictures = [
		{
			user: {
				username: 'Dkong',
				avatar: 'http://www.revistavicio.com/wp-content/uploads/2016/02/002_men_will_smith_m-1.jpg'
			},
			url: 'partitura.png',
			likes: 2000,
			liked: true,
			createdAt: new Date()
		},
		{
			user: {
				username: 'Damilo',
				avatar: 'https://pbs.twimg.com/profile_images/788376275941548032/tt6VvYh2.jpg'
			},
			url: 'partitura.png',
			likes: 0,
			liked: false,
			createdAt: new Date().setDate(new Date().getDate() - 1)
		}
	];
	setTimeout(function(){
		res.send(pictures);
	}, 2000)
});

app.post('/api/pictures', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.send(508, "Error uploading file");
    }
    res.send('File uploaded');
  })
})

app.listen(3000, function(err) {
	if (err)
		return console.log('Hubo un error'),
		process.exit(1);
	console.log('Traif vive / puerto 30k00 ');
})

ar express = require('express');
var app = express();
var multer  = require('multer');
var ext = require('file-extension');


var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    cb(null, +Date.now() + '.' + ext(file.originalname))
  }
})

var upload = multer({ storage: storage }).single('picture');



app.set('view engine','pug');

app.use(express.static('public'));

app.get('/', function(req, res){
  res.render('index' , {title: 'Platzigram'})
});

app.get('/signup', function(req, res){
  res.render('index', {title: 'Platzigram-Signup'} )
});



app.get('/signin', function(req, res){
  res.render('index' , {title: 'Platzigram-Signin'})
});

app.get('/api/pictures', function (req, res) {
  var pictures = [
   {
     user: {
       username:'craez',
       avatar:'https://scontent.fmad3-1.fna.fbcdn.net/v/t1.0-1/p240x240/14963358_10210211191868705_77564816987331824_n.jpg?oh=4b2e909c24947498b91da11cd37043d5&oe=58BBCC58',
     },
     url:'office.jpg',
     likes: 0,
     liked: true,
     createAt: new Date(),
   },
   {
     user: {
       username:'craez',
       avatar:'https://scontent.fmad3-1.fna.fbcdn.net/v/t1.0-1/p240x240/14963358_10210211191868705_77564816987331824_n.jpg?oh=4b2e909c24947498b91da11cd37043d5&oe=58BBCC58',
     },
     url:'office.jpg',
     likes: 1,
     liked: true,
     createAt: new Date().setDate(new Date().getDate() - 10),
   }

  ];

setTimeout(function () {
res.send(pictures);
}, 2000 );
})

app.post('/api/pictures', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.send(500, "Error uploading file");
    }
    res.send('File uploaded');
  })
})

app.listen(3000, function(err){
  if(err) return console.log("mierda un error"), process.exit(1);
  console.log("Platzigram escuchando el puerto 3000");
});

function onsubmit(ev) {
 ev.preventDefault();
 var data = new FormData(this);
 request
  .post('/api/pictures')
  .send(data)
  .end(function (err, res) {
     console.log(err, res)
      })
  }

app.post('/api/pictures', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.status(500).send("Error uploading file");
    }
    res.send('File uploaded');
  })
})```

Subiendo la foto a nuestro servidor web

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos

Cambiando el idioma y almacenándolo en localStorage

Obteniendo una respuesta del servidor con Superagent

Obteniendo una respuesta del servidor con Axios

Obteniendo una respuesta del servidor con Fetch API

Obteniendo una respuesta del servidor con async/await

Agregando un botón para subir una nueva foto

Subiendo la foto a nuestro servidor web

Conclusiones

Cierre del curso

Es hora de construir el backend de Platzigram

Desafio 1: Hacer la página de un usuario

Desafio 2: Agregar un spinner mientras carga las imágenes del timeline

Desafio 3: Agregar un modal para mostrar una imagen en el perfil del usuario

Sesiones en Vivo

Stream 1: Resolviendo el primer desafío

Stream 2: Resolviendo el segundo desafío

Stream 3: Resolviendo el tercer reto

Stream 4: Resolviendo el cuarto reto

Stream Extra: Acceder a la webcam usando JavaScript

Complementos del curso

Unit testing en JavaScript con Mocha

Entendiendo los tiempos de ejecución en JavaScript

Usando babel en el lado del servidor (en Node.js)