Agregando un botón para subir una nueva foto

Clase 32 de 46 • Curso Definitivo de JavaScript 2016

Contenido del curso

Bienvenidos

1
¿Qué necesito para tomar el curso?
00:10 min

Materiales

2
Descarga el código del proyecto
00:10 min

Conceptos Básicos

Construyendo nuestro proyecto

Conclusiones

Sesiones en Vivo

Complementos del curso

Tomar examen

Comentarios

JUAN PABLO GOMEZ GONZALEZ

student•

No olvidar, cuando se usa yo-yo ${cancel} para llamar una función declarada en el evento onclick o onchange no se debe poner "" ejemplo:

<button onclick=${cancel} >Ejemplo Cancelar</button>

Victor Gutierrez Rivas

student•

Agregaste la función abajo de cancel?

Jhonatan Ferney Ospina

student•

Buenas tarde me sale el mismo error de mcarmenmg que es throw new TypeError('Expected an element') alguna idea de como solucionarlo gracias!!

María del Carmen Martín Gómez

student•

Me sale el siguiente errthrow new TypeError('Expected an element')or

María del Carmen Martín Gómez

student•

Me sale el siguiente error

throw new TypeError('Expected an element')

¿Alguna idea? :(

Heiler Joel Finol Valbuena

student•

Me sale este error, es por el translate, pero no logro solucionarlo, alguien sabe?

TypeError: A message must be provided as a String or AST.
    at new MessageFormat (core.js:21)
    at message (src\translate\index.js:26)
    at module.exports (src\homepage\template.js:12)
    at src\homepage\index.js:15
    at index.js:474
    at nextEnter (index.js:306)
    at asyncLoad (src\homepage\index.js:59)
    at <anonymous>```

Diego Forero

Team Platzi•

Comparte el código que estas escribiendo para poder ayudarte, con solo el error es imposible ayudarte, te puede decir que no estas pasando un string y que por eso es el error.

Puede que le estés enviando un objeto en lugar de un string.

Heiler Joel Finol Valbuena

student•

Aqui esta el codigo.

var yo = require('yo-yo');
var layout = require('../layout'); 
var picture = require('../picture-card'); 
var translate = require('../translate').message;

module.exports = function (pictures){
    var el = yo`<div class="container timeline">
          <div class="row">
            <div class="col s12 m10 offset-m1 l8 offset-l2 center-align">
              <form enctype="multipart/form-data" class="form-upload">
                <div id="fileName" class="fileUpload btn btn-flat cyan"> 
                  <span><i class="fa fa-camera" aria-hidden="true"></i> ${translate('upload-picture')} </span>
                  <input name="picture" id="file" type="file" class="upload"/>
                <div>
                <button id="btnUpload" type="submit" class="btn btn-flat cyan hide">${translate('upload')}</button>
                <button id="btnCancel" type="button" class="btn btn-flat red hide"><i class="fa fa-times" aria-hidden="true"></i></button>
              </form>   
            </div>
          </div>
          <div class="row">
            <div class="col s12 m10 offset-m1 l6 offset-l3">
              ${pictures.map(function(pic){
                return picture(pic); 
              })}
            </div>
          </div>
      </div>`;
    return layout(el);
};

Abdiel David Dioses Curay

student•

Tengo el problema: que no me aparece el botón, estoy usando google Chrome y Atom en windows8, pero no aparece, peor aun en consola no muestra error alguno, este es mi código:

var yo = require('yo-yo');
var layout = require('../layout');
var picture = require('../picture-card');
var translate = require('../translate').message;

module.exports = function(pictures) {
  var el = yo`<div class="container timeline">
                <div class="row">
                  <div class="col s12 m10 offset-m1 l8 offset-l2 center-align">
                    <form enctype="multipart/form-data" class="form-upload" id="formUpload">
                        <div id="fileName" class="fileUpload btn btn-flat cyan">
                          <span><i class="fa fa-camera" aria-hidden="true"></i>${translate('upload-picture')}</span>
                          <input name="picture" id="file" type="file" class="upload hide" onchange=${onchange}></input>
                        </div>
                        <button id="btnUpload" type="submit" class="btn btn-flat cyan hide">${translate('upload')}</button>
                        <button id="btnCancel" type="button" class="btn btn-flat red hide" onclick=${cancel}><i class="fa fa-times" aria-hidden="true"></i></button>
                      </form>
                  </div>
                </div>
            <div class="row">
              <div class="col s12 m10 offset-m1 l6 offset-l3">
              ${pictures.map(function (pic) {
                return picture(pic);
              })}
              </div>
            </div>
          </div>`;

function toggleButtons() {
  document.getElementById('fileName').classList.toggle('hide');
  document.getElementById('btnUpload').classList.toggle('hide');
  document.getElementById('btnCancel').classList.toggle('hide');
}

function cancel() {
  toggleButtons();
  document.getElementById('formUpload').reset();
}

function onchange() {
  toggleButtons();
}

return layout(el);
}```

Diego Forero

Team Platzi•

Puede ser un problema en tus clases de css, revisa el css usando el inspector de elementos a ver si esta el boton pero oculto y revisa el video nuevamente a lo mejor te saltaste algo en los estilos.

Daniel Hidalgo

student•

¿por qué en el onclick “Cancel” no se puso entre paréntesis y comillas?

onclick=${cancel}```

Diego Forero

Team Platzi•

Porque estas llamando la función cancel, si lo pones entre comillas simplemente es una cadena de texto.

Luis Felipe Cardona Florez

student•

todavia no he entendido en que momento el boton abre la ventana de window para poder elergir cualquier archivo, alguien me puede decir que es lo que hace que a darle click al boton se abra esa ventana ? gracias.

Diego Forero

Team Platzi•

La ventana la despliega el navegador de forma automática cuando se agrega el input de tipo file.

Luis Felipe Cardona Florez

student•

Oh con razon, muchas gracias 😄 !

Balam Omaña

student•

Que es el offset?

Efrain Rivera

student•

El offset es para indicar que quieres que te ignore el número de columnas que indiques, por ejemplo “offset-m1” le está indicando que ignore la primera columna, o sea que comenzaría a partir de la columna 2.

Evert Escalante

student•

y aplica para cada lado de la pantalla entonces m10 diez columnas y offset-m1 una columna a cada lado para que sean las 12 columnas

TypeError: A message must be provided as a String or AST.
    at new MessageFormat (core.js:21)
    at message (src\translate\index.js:26)
    at module.exports (src\homepage\template.js:12)
    at src\homepage\index.js:15
    at index.js:474
    at nextEnter (index.js:306)
    at asyncLoad (src\homepage\index.js:59)
    at <anonymous>```

var yo = require('yo-yo');
var layout = require('../layout'); 
var picture = require('../picture-card'); 
var translate = require('../translate').message;

module.exports = function (pictures){
    var el = yo`<div class="container timeline">
          <div class="row">
            <div class="col s12 m10 offset-m1 l8 offset-l2 center-align">
              <form enctype="multipart/form-data" class="form-upload">
                <div id="fileName" class="fileUpload btn btn-flat cyan"> 
                  <span><i class="fa fa-camera" aria-hidden="true"></i> ${translate('upload-picture')} </span>
                  <input name="picture" id="file" type="file" class="upload"/>
                <div>
                <button id="btnUpload" type="submit" class="btn btn-flat cyan hide">${translate('upload')}</button>
                <button id="btnCancel" type="button" class="btn btn-flat red hide"><i class="fa fa-times" aria-hidden="true"></i></button>
              </form>   
            </div>
          </div>
          <div class="row">
            <div class="col s12 m10 offset-m1 l6 offset-l3">
              ${pictures.map(function(pic){
                return picture(pic); 
              })}
            </div>
          </div>
      </div>`;
    return layout(el);
};

var yo = require('yo-yo');
var layout = require('../layout');
var picture = require('../picture-card');
var translate = require('../translate').message;

module.exports = function(pictures) {
  var el = yo`<div class="container timeline">
                <div class="row">
                  <div class="col s12 m10 offset-m1 l8 offset-l2 center-align">
                    <form enctype="multipart/form-data" class="form-upload" id="formUpload">
                        <div id="fileName" class="fileUpload btn btn-flat cyan">
                          <span><i class="fa fa-camera" aria-hidden="true"></i>${translate('upload-picture')}</span>
                          <input name="picture" id="file" type="file" class="upload hide" onchange=${onchange}></input>
                        </div>
                        <button id="btnUpload" type="submit" class="btn btn-flat cyan hide">${translate('upload')}</button>
                        <button id="btnCancel" type="button" class="btn btn-flat red hide" onclick=${cancel}><i class="fa fa-times" aria-hidden="true"></i></button>
                      </form>
                  </div>
                </div>
            <div class="row">
              <div class="col s12 m10 offset-m1 l6 offset-l3">
              ${pictures.map(function (pic) {
                return picture(pic);
              })}
              </div>
            </div>
          </div>`;

function toggleButtons() {
  document.getElementById('fileName').classList.toggle('hide');
  document.getElementById('btnUpload').classList.toggle('hide');
  document.getElementById('btnCancel').classList.toggle('hide');
}

function cancel() {
  toggleButtons();
  document.getElementById('formUpload').reset();
}

function onchange() {
  toggleButtons();
}

return layout(el);
}```

Agregando un botón para subir una nueva foto

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