Javascript, Subir Imagenes con Progressbar
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- Aprende el concepto de Subir imagenes desde el Frontend a traves de un ejemplo prático usando Javascript, HTML y un servicio de almacenaje de Imágenes como Cloudinary. Adicionalmente implementaremos una barra de progreso para que a medida que se suba la imagen veamos su avance. Y tambien usarmos una biblioteca llamada Axios para enviarlo al servidor.
REGISTRATE EN CLOUDINARY
cloudinary.com...
CÓDIGO DE LA APLICACIÓN MOSTRADA
github.com/Faz...
FAZTWEB
www.faztweb.co...
CURSO DE JAVASCRIPT
• Curso Javascript para ...
CURSO DE HTML
• Curso HTML para Princi...
CURSO DE CSS
• Curso CSS para Princip...
CURSO DE GIT
• Git y Github | Curso P...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
FAZT - TH-cam:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
DISCORD
/ discord
SLACK
join.slack.com...
#javascript #cloudinary #imagenes
gran trabajo el de fazt al enseñar grandes cosas sin ningun interes, es de admirar . saludos desde colombia
Esa fluidez con la que programas, espero algún día programar así.
Buen vídeo!
Concuerdo un gran referente he aprendido mucho de tu canal
Mis excusas por mi teclado en ingles,, que por ello no puedo poner ni tildes ni algunos caracteres especiales:
Fantastica la demostracion y lo explicas tan sencillo que se hace muy muy entendible los conceptos y tecnologias a aplicar para subir las imagenes, e inspira a ir mas alla de lo que explicas. Muchas muchas gracias Fazt!!!
Algo que me pareceria genial saber: Me gustaria que me explicaras la diferencia entre usar Cloudinary y usar Firebase para subir recursos (imagenes, archivos, video, etc.) a la nube. De pronto con ello me des a entender tu preferencia por Cloudinary.
Muchas muchas gracias!!! Sigue asi!!! :)
He aprendido mucho, ya le veo sentido a Javascript, es un hermoso lenguaje ☺
Denle una cerveza a este hombre! (B)
un aporte increíble Fazt, saludos de Perú! por fa sigue con mas videos.
UN VERDADERO CRACK !!!, hombre, muchísimas gracias!!!!!!! un saludo crack!
Gracias Fazt, no olvides Nodemailer + Handlebars
Fazt saludos desde Colombia, por favor más vídeos acerca de NestJS, como por ejemplo integrarlo con GraphQL etc... muchas grácias!!!!
Tus videos los mejores.
Fazt t amo.. Mas ejemplos prácticos de graphql saludos
eres grande fazt! esperando la serie de crear un eComerce. saludos desde venezuela
de que parte de Venezuela eres?
Fazt, grandioso video, el eCommerce te has olvidado..... Saludos desde Ecuador.
@@adrianfermiranda1456 del estado Bolivar y tu?
@@David-qr6lq Yo del estado Bolívar Municipio EL Callao... Te gusta la programación='?
@@adrianfermiranda1456 si, por?
Sos grande, gracias por los vídeos.
Muchas gracias, espero ver uno de como lo usas con Videos.
Muy bien explicado!
Excelente tutorial, explicas muy bien. Me sirvió para aprender un método alternativo, pero te sugiero que cambies el título de tu vídeo a "Subir imágenes utilizando progressbar y la librería axios" porque al final no utilizaste javascript puro para tu código en la parte que más interesaba del vídeo y pues ahora tengo que seguir buscando porque no estoy interesado de momento en utilizar esa librería, pues ya tengo mi proyecto elaborado. Gracias igualmente y bendiciones.
eres un grande.
Excelente, gracias
Gracias amigo!!
Excelente como siempre! Muchas gracias!
PD: de casualidad tienes un vídeo de cómo hacer un upload de múltiples imágenes con drag and drop?
como hago para que no se borre al recargar?
17 feb 2021, funciona bien
Fatz! no te olvides de porfa de PostCss, con React. o solo para trabajar las imágenes y estilos que elemental para trabajar con estilos aparte ce sass porfa.
Gracias por la info, y para subir videos, ¿Cómo sería...?
Gracias!!
gracias
podrías por favor, hacer un tuto de lo mismo pero a la inversa? es decir, en lugar de subida, que sea de descarga de archivos. Muchisimas gracias!!!
queria algo light después de la clase de grapqhl y conocer cloudinary y me encuentro que además como siempre el video tiene muchas joyas, como axios en el front, etc, una clase genial como todas! :D :) Gracias!
pregunta: subir las imagenes en tu propio servidor no seria más rápido que accederlas a través de un servicio de terceros como cloudinary (afectando al posicionamiento en google)?
De verdad es admirable el efecto, gracias por eso es súper útil y funciona de lo mejor, solo una pregunta? Como ago para subirla a una carpeta por ejemplo tu explicaste que el URL termina en .../upload ahora como se hace para subirla a una carpeta o folder de cloudinary para mantener las imágenes ordenadas? Respóndeme por favor en intentado colocando el URL de un folder pero no funciona
Hola, existe alguna forma de subir mas de una imgen a cloudinary?
Hola, realizaría un video haciendo algo con electron y node-pty? Como un shell como el de VSCode
hola, estoy viendo este video en la actualidad pero en la cuenta de cloudinary no puedo encontrar las API URL para tomar el link de image upload. y ahi me quedé. alguien sabe donde lo puedo encontrar
Cómo se puede subir una imagen a S3 de AWS pero sin guardar la imagen en el servidor, es dexir, guardarla directamente en un bucket usando node
En el caso de que utilizaría FETCH como obtendría el progreso ?
No creo que sea posible la verdad
Hola. Gracias por compartir tus conocimientos. Tengo una consulta relacionada. Estoy haciendo un programa que aspira a transformarse en una aplicación, utilizando HTML, CSS y Javascript. Lo que quiero es que el usuario personalice las imágenes que quiera usar en el juego. Es decir, el programa debe obtener las imágenes siguiendo la ruta de cada imagen seleccionada por el usuario. ¿Qué comando en Javascript me permite hacer eso? De antemano gracias.
Como puedo desde el evento 'change' pasarle esa informacion del evento a un objeto que se crea con otro evento?
gracias amigasooooo
Fazt como se llama el tema que tienes en el editor VS CODE?
alguien sabe si esto es posible dentro de un html canvas?
Por favor haz un ejemplo de como subir archivos de video en Mongodb y/o en la nube, por favor ya que no hay ninguno en TH-cam - Gracias!
hola gracias tengo una pregunta, como hago que la imagen se suba a una base de datos de phpmyadmin xampp?????????????????
yo diría que con el mismo metodo que suber un formulario, o si ya lo has consegido dime como hahah
Hola fazt buen día saludo desde Bolivia, un favor estoy realizando una aplicación con axios y laravel estoy guardando un excel que tiene unos 10000 datos tarda un buen tiempo pero lo inserta lo que quiero es crear el progress bar mientras termina de insertado todos los datos espero que me puedas ayudar o buscar información de como realizarlo muchísimas gracias y siguen realizando tan buenos vídeos
¿Javascript puro y usaste axios en vez de fetch()?
Igualmente, adelanté el video y me salí, pensaba que lo haría con fetch pero nada
¿que tiene de malo axios?
@@kazhoner626s Bueno, ¿es obvio no? - No hay nada de malo en usar axios o cualquier otra librería que solucione los cors. Pero si vas hacerlo con JS puro y duro, hazlo de principio a fin.
me ubiera gustado que lo hicieras con php :C pd buen video saludos!
progress ar gracias :O
En consola me dice : Access to XMLHttpRequest at 'api.cloudinary.com/v1_1/nitehuertas' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Como podría solucionarlo? Gracias
tengo el mismo problema.. lo pudiste solucionar?
no me funciona y a ustedes?
Es muy peligroso y vulnerable hacerlo con lenguajes del lado del navegador
Seria bueno que en los videos aclare eso, uno que esta aprendiendo cree que esta haciendo las cosas bien. Gracias por ese dato, ya se me hacia raro