Agregando un botón para subir una nueva foto

Clase 32 de 46 • Curso Definitivo de JavaScript 2016

Resumen

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

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