Q bien Leonidas, siempre buscaba tutoriales para hacer que el formulario funcionara y no sabía ni siquiera que término usar. Gracias geniales esas clases prácticas
Sería genial si nos hablaras más sobre backend, he aprendido muchísimo de ti sobre el frontend con todos tus cursos de Platzi, eres un excelente profesor y guía :3
Muchas gracias por ayudar a la comunidad subiendo contenido de tan buena calidad, me despejaste muchas dudas y ayudaste con mi codigo te deseo mucho exito😄
@@LeonidasEsteban Si Leo, sigue haciendo estos vídeos instructivo podrán inventar miles de framework pero la base (Javascript) no cambia, lo utilice en Vue para un sistemas de condominios que estoy realizando 😃Saludos y Bendiciones para ti campeón
const FILES_UP = evento.target.files[0]; const fileReader = new FileReader(); fileReader.onload = (e) => { // EMITE EVENTO DE CUANDO CARGA. this.base64Pdf.emit({ base64Pdf: fileReader.result, nameFile: this.nameFile }); }; // CARGA EL ARCHIVO SELECCIONADO. fileReader.readAsDataURL(FILES_UP); Esto es en un componente hijo. Por eso emito el evento con el base64 de la imagen. Y en el componente padre, recibes el evento mediante un metodo y ahi accedes con las propiedades "evento.base64Pdf" y "evento.nameFile"
Excelente video, yo estoy con algo que me esta volviendo loco, ando haciendo un formulario de registro pero tengo unos problemas con caracteres como la ñ, no los detecta, cabe resaltar que tanto la base de datos como los archivos están en UTF8 y que este problema solo me ocurre con fetch, ya que si envió el formulario de de manera 'tradicional' con el action si reconoce estos caracteres, espero me puedas ayudar, gracias de antemano
Me gusto el video aprendi mucho, quisiera un poco de ayuda con subir archivos de tipo pdf o d¿docx y queria saber como puedo hacer para que la pagina se actualice sin niguna info por que se actualiza pero todo sigue con los mismo datos
Muy bueno e instructivo el vídeo y ejercicio. Te pregunto, me gustaría hacer una página web para registrar usuarios, pero no veo claro cómo implementar un par de cosas; como validar que los campos password y repitePassw sean iguales con una buena experiencia de usuario y otra es cómo comprobar que el usuario es único en la bbdd sin enviar el form completo. Creo que pueda ser parecido a este ejercicio. ¿podrías orientarme cómo hacerlo? Gracias por compartir y la manera que lo hace
Leonidas es gusto ver tus vídeos, quiero pedirte un favor podrás hacer un video de las extensiones que utilizas en visual estudio code para javascript,
buenas noches Leonidas ,excelente manera de explicar ,una consulta porque al momento de ejecutar en la consola de chrome el objeto formData seguido del método y entre paréntesis el nombre del input ,me lanza el error formData.get is not function
Hola buen día Leonidas oye intento usar FormData para enviar archivos a mi API, pero no me permite subir archivos más grandes de 250kb, tienes algún consejo? o info que me pueda apoyar?
Seguro no tiene que ver con tu Frontend sino con tu backend sue no los permite. Esa configuración depende de tu servidor web como por ejemplo ngnx que es muy popular
Espero alguna vez poder entrar a enseñar cosas sobre aws, no soy muy bueno pero he estado aprendiendo sobre infraestructura como código y automatización que me interesa un montón
Hola disculpa tengo una duda ¿Porque se actualiza mi navegador al subir un archivo con ajax, jquery y php? según veía el error puede ser en la version de jquery que uso(v3.4.1) ya dicen que el chrome puede que no lo soporte o eso leei aqui es.stackoverflow.com/questions/8591/porque-se-actualiza-mi-navegador-al-subir-un-archivo-con-ajax-jquery-y-php Porfa necesito ayuda me molesta que se refresque la pagina cada vez que envie una img o un archivo y si tengo puesto el e.priventDefault()
@@LeonidasEsteban gracias pero aun que me costo 2 días de borra reescribe resulto que era un problema de mi configuración con visual code ya que yo avía puesto que el servidor se recargara cada ves que se modifique un archivo o encuentre un cambio en la carpeta del proyecto jajaja me di cuenta de eso probando en el servidor sin configuración XD en fin ya valio XD jajjaja
Leonidas acabo de suscribirme a tu canal, me gusta comoexplicas todo de manera muy facil, una pregunta, como se podria hacer un reporte en pdf de lo que ya subiste al servidor en este caso por ejemplo.
Lo subes a un server y esto tiene muchas opciones. Desde un servidor compartido, un vps, o nubes como heroku, now o entornos más personalizarles como aws o google cloud
Hola, excelente video. Una duda que me surge en caso de querer mostrar una bata de progreso para la subida del archivo en caso que sea grande, hay algún método que te vaya informando los bytes subidos? Saludos
🤔 buena pregunta, el navega ador muestra la subida poco a poco pero investigaré si podemos hacerlo de una forma custom. Normalmente veo que se usan loaders indeterminados para estos casos
Hola! no me funcionó el "$video.setAttribute('src', video);" pero lo pude resolver con "$video.src = videoURL;" lo dejo escrito por si a alguno le sirve! saludos
les paso el codigo de los que quieran saber como mantener la extension y el nombre de origen... const multer = require('multer'); const storage = multer.diskStorage({ destination: 'images/', filename: (req, file, cb) => { cb(null, file.originalname); } }); const upload = multer({ storage });
Saludos desde Perú, excelentes vídeos, me encantan tus explicaciones. Me gustaría que hicieras un tutorial sobre animaciones css que se ejecuten cuando el elemento entre en pantalla. O me des alguna idea de como hacerlo.
Amigo que buen video, podrias hacer lo mismo pero con angular (FormData), es decir, enviar datos y archivos desde formulario, pues es un dolor de cabeza. Saludos desde Colombia amigo.
Eres el único que encontre que enseña como recibir el FormData en el backend! muchisimas gracias! ojala Dios lo bendiga con muchos hijos :)
Lo explicas de una manera tan sencilla que se me quedo marcado a fuego en la mente!!! Muchísimas gracias por tu labor.
No te pierdas los lives y sigue disfrutando todo el contendio!
Grande crack, voy a revolver todo lo que tenes que parece estar buenisimo! Buenisima tu onda! Saludos de Argentina
Q bien Leonidas, siempre buscaba tutoriales para hacer que el formulario funcionara y no sabía ni siquiera que término usar. Gracias geniales esas clases prácticas
Maravilloso, de esto se trata el canal. Comparte las clases porfavor
Sería genial si nos hablaras más sobre backend, he aprendido muchísimo de ti sobre el frontend con todos tus cursos de Platzi, eres un excelente profesor y guía :3
Es algo que me comentan mucho. No es mi fuerte pero se lo suficiente como para enseñar un par de cosas divertidas
gracias bro, eres un crack. Muy interesante lo del formData, no lo conocía, ni tampoco tenia idea de como renderizar la imagen cargada por el usuario
Leonidas otro Peruano Crack..... Estamos muy Orgullosos de ustedes desde Argentina...
jajaja el mejor profesor de Platzi!!!!! Eres un Genio!!! =) =) =)
🥰 es un gran honor tener ese título
Hola, conosi FormData hace dos años me salvo la vida para enviar archivos, genial!
Suele ser de esos casos un tanto difíciles, pero sin duda se puede 😁
Muchas gracias Leonidas por la explicación, me sirvió como puntapie para dar con 1 solución a 1 problema que tenía en angular.
Un abrazo!
Muchas gracias por ayudar a la comunidad subiendo contenido de tan buena calidad, me despejaste muchas dudas y ayudaste con mi codigo te deseo mucho exito😄
Eres un capo leo, saludos desde Loreto-Perú!
Muchas gracias por esta explicación tan agradable y didáctica.
Muchas gracias a ti por tomarte el tiempo de apreciarla con tu comentario, enserio ayuda al animo para crear más contenido.
Graciass 🙌🙌 Me salvaste de un dolor de cabeza que venia teniendo hace varios dias 😅
Gracias hermano , tenía un problema de previsualización de imagen y esto resolvió ese problema ❤
Que alegría haber sido de ayuda. 🫶
@@LeonidasEsteban Si Leo, sigue haciendo estos vídeos instructivo podrán inventar miles de framework pero la base (Javascript) no cambia, lo utilice en Vue para un sistemas de condominios que estoy realizando 😃Saludos y Bendiciones para ti campeón
Gracias Leonidas!!!! Ya me veo haciendo magia con este video + Angular!
9:03 Getters y setters son el pan de cada día.
Saludos!
Ojito Ojito con eso!!! , geniales tus videos, debiste abrir un canal hace mucho.
Mil gracias por tu confianza Irving, si. Debí hacer esto desde siempre
buen video bro, ahora soy un ser más iluminado
hola, como podria hacer para obtener audio x streaming recorder y en vez de guardarlo local enviarlo directamente al servidor?
Gracias Esteban! Ha estad buenísimo!
Me encanta que te sirvan las clases
Tengo una consulta prof Leónidas como puedo ver en un consolé log lo que lleva el form_data cuando envío múltiples imagenes
axios solo puede recibir este formato cierto?... si envio un archiv en formato blob me sale {}
Excelente Leonidas, muchas gracias por tus videos, podria hacer lo mismo pero con angular, pues es un verdadero problema hacerlo en angular.
const FILES_UP = evento.target.files[0];
const fileReader = new FileReader();
fileReader.onload = (e) => {
// EMITE EVENTO DE CUANDO CARGA.
this.base64Pdf.emit({
base64Pdf: fileReader.result,
nameFile: this.nameFile
});
};
// CARGA EL ARCHIVO SELECCIONADO.
fileReader.readAsDataURL(FILES_UP);
Esto es en un componente hijo. Por eso emito el evento con el base64 de la imagen. Y en el componente padre, recibes el evento mediante un metodo y ahi accedes con las propiedades "evento.base64Pdf" y "evento.nameFile"
Excelente video, yo estoy con algo que me esta volviendo loco, ando haciendo un formulario de registro pero tengo unos problemas con caracteres como la ñ, no los detecta, cabe resaltar que tanto la base de datos como los archivos están en UTF8 y que este problema solo me ocurre con fetch, ya que si envió el formulario de de manera 'tradicional' con el action si reconoce estos caracteres, espero me puedas ayudar, gracias de antemano
Excelente video
Pero donde se envia esa Imagen a un servidor o a Una simple carpeta
?
Hola leonidas una pregunta se puede previsualizar un pdf por ejemplo en lugar de una foto?
No de esta forma
y como se limpian los inputs del formData luego de enviar la informacion al servidor ?! Sin usar variables de estado
Súper fácil, mira aquí te comparto la documentación developer.mozilla.org/es/docs/Web/API/HTMLFormElement/reset
Oye Leonidas que tal una superclase con webcrypt, especificamente como encriptar datos y enviarlos al servidor. Te agradezco!!!! Super teacher!!
Una duda se puede encriptar la imagen
Me gusto el video aprendi mucho, quisiera un poco de ayuda con subir archivos de tipo pdf o d¿docx y queria saber como puedo hacer para que la pagina se actualice sin niguna info por que se actualiza pero todo sigue con los mismo datos
Como se podría esto en un PDF, quiero enviar un PDF vía mail y no entiendo como hacerlo.
Un mail es un archivo igual a una imagen, es lo mismo.
Que buen video, me gustaría saber cómo sería en el caso de enviar audios en mp3 al servidor, muchas gracias!
hola, pudiste hacerlo? enviar el blob?
Muy bueno e instructivo el vídeo y ejercicio. Te pregunto, me gustaría hacer una página web para registrar usuarios, pero no veo claro cómo implementar un par de cosas; como validar que los campos password y repitePassw sean iguales con una buena experiencia de usuario y otra es cómo comprobar que el usuario es único en la bbdd sin enviar el form completo. Creo que pueda ser parecido a este ejercicio. ¿podrías orientarme cómo hacerlo?
Gracias por compartir y la manera que lo hace
Leonidas es gusto ver tus vídeos, quiero pedirte un favor podrás hacer un video de las extensiones que utilizas en visual estudio code para javascript,
Que buena idea! Me lo anoto 😀
Hola, tu vídeo me ayudo bastante, pero tengo un problema al utilizar el método PUT con el formData y fetch. Me podría alguien ayudar. Gracias.
buenas noches Leonidas ,excelente manera de explicar ,una consulta porque al momento de ejecutar en la consola de chrome el objeto formData seguido del método y entre paréntesis el nombre del input ,me lanza el error formData.get is not function
Algo está en la instancia de FormData, recuerda formData = new FormData(form)
Muchas gracias .
Hola buen día Leonidas oye intento usar FormData para enviar archivos a mi API, pero no me permite subir archivos más grandes de 250kb, tienes algún consejo? o info que me pueda apoyar?
Seguro no tiene que ver con tu Frontend sino con tu backend sue no los permite. Esa configuración depende de tu servidor web como por ejemplo ngnx que es muy popular
Excelente vídeo parcero
Leónidas, video sobre cómo encontrar trabajo como Dev en EEUU. Crack! Tus vídeos son geniales. 👌
Esto estaría cool, voy a recolectar lo que me han dicho mis amigos para hacer un contenido de este tipo
MUY INTERESANTE GRACIAS LEO
Así manejo todos mis formularios y es súper divertido
compa como seria para varios archivos
que grande!! thanks
Muchas gracias leonidas.
Uuu esta genial ! muchas gracias
Gracias leonidas, podrias hacer un tutorial del uso de s3 de amazon para estas subidas de archivos en servidores que no sean propios.
Espero alguna vez poder entrar a enseñar cosas sobre aws, no soy muy bueno pero he estado aprendiendo sobre infraestructura como código y automatización que me interesa un montón
Hola disculpa tengo una duda ¿Porque se actualiza mi navegador al subir un archivo con ajax, jquery y php? según veía el error puede ser en la version de jquery que uso(v3.4.1) ya dicen que el chrome puede que no lo soporte o eso leei aqui es.stackoverflow.com/questions/8591/porque-se-actualiza-mi-navegador-al-subir-un-archivo-con-ajax-jquery-y-php
Porfa necesito ayuda me molesta que se refresque la pagina cada vez que envie una img o un archivo y si tengo puesto el e.priventDefault()
Solo para descartar es preventDefault()
@@LeonidasEsteban gracias pero aun que me costo 2 días de borra reescribe resulto que era un problema de mi configuración con visual code ya que yo avía puesto que el servidor se recargara cada ves que se modifique un archivo o encuentre un cambio en la carpeta del proyecto jajaja me di cuenta de eso probando en el servidor sin configuración XD en fin ya valio XD jajjaja
Muchas gracias c:
muy bien explicado
Leonidas acabo de suscribirme a tu canal, me gusta comoexplicas todo de manera muy facil, una pregunta, como se podria hacer un reporte en pdf de lo que ya subiste al servidor en este caso por ejemplo.
Te falto expliar como hacer para agregarle la extension del origen al archivo destino
Leonidas, ¿Ese servidor dónde se pone? Para que no esté corriendo en mi computadora
Lo subes a un server y esto tiene muchas opciones. Desde un servidor compartido, un vps, o nubes como heroku, now o entornos más personalizarles como aws o google cloud
El tutorial es estupendo, ¿una pregunta? Cuando el archivo es un PDF, ¿cómo se hace?Te agradecería que me ayudaras, muchas gracias
Hola, excelente video. Una duda que me surge en caso de querer mostrar una bata de progreso para la subida del archivo en caso que sea grande, hay algún método que te vaya informando los bytes subidos? Saludos
🤔 buena pregunta, el navega ador muestra la subida poco a poco pero investigaré si podemos hacerlo de una forma custom. Normalmente veo que se usan loaders indeterminados para estos casos
Con el objeto XMLHttpRequest se puede pero la pregunta está enfocada si se puede mediante Fetch. Saludos y gracias.
Excelente tutorial!! Una duda al respecto: La imagen recibida no tiene formato jpg como la original ¿cómo se consigue eso?
Excelente
gracias por el aporte pero porque la necesidad de meter relleno y convertir un video de 10 min en uno de casi 30
Hola! no me funcionó el "$video.setAttribute('src', video);" pero lo pude resolver con "$video.src = videoURL;" lo dejo escrito por si a alguno le sirve! saludos
les paso el codigo de los que quieran saber como mantener la extension y el nombre de origen...
const multer = require('multer');
const storage = multer.diskStorage({
destination: 'images/',
filename: (req, file, cb) => {
cb(null, file.originalname);
}
});
const upload = multer({ storage });
Podrías compartir un poco de express js? Creo que sería útil para aquellos que se quedan con la inquietud de saber un poco de backend :)
A mi también me emociona hacer más Backend, voy a hacer más ejercicios que requieran esta conexión para entender flujos más completos
seria bien un videito de import y export en JS, Gracias Leonidas!
Existe ua-cam.com/video/Ha0FkGeNIkA/v-deo.html
Saludos desde Perú, excelentes vídeos, me encantan tus explicaciones. Me gustaría que hicieras un tutorial sobre animaciones css que se ejecuten cuando el elemento entre en pantalla. O me des alguna idea de como hacerlo.
Por supuesto, echa a volar tu imaginación con esto ua-cam.com/video/Mm9R1Z5B31s/v-deo.html
@@LeonidasEsteban Gracias, me sirvio un monton.
si deberias dar clases de css
Amigo que buen video, podrias hacer lo mismo pero con angular (FormData), es decir, enviar datos y archivos desde formulario, pues es un dolor de cabeza. Saludos desde Colombia amigo.
Si seria muy bueno, yo estoy intentando hacerlo dese hace meses y nada que lo logro, soy novato y quiero aprender angular.
la informacion es poder la informacion da dinero esto va para estados
Comparto con la comunidad mis pruebas de FormData usando Angular github.com/jyacot/form_data_test
Esto fue supera rápido, felicitaciones
Porque hablas asi? habla normal!
Así cómo? Qué es “normal”?
sisi yo ni me puedo concentrar. Es muy detestable
@@LeonidasEsteban aprende de Fazt el si habla normal
hispter.js