Subir Archivos a Firebase desde React (UploadBytes, getDownloadURL)
HTML-код
- Опубликовано: 10 сен 2024
- Aprende a subir archivos a Firebase Storage desde React. En este ejemplo practico te mostrare como crear un proyecto de React (usando Vite, aunque es lo mismo si usas create-react-app o Nextjs desde el Frontend), luego instalaremos la biblioteca de Firebase (version 9) y subiremos nuestros archivos, además también mostrare como obtener una URL.
🎥 Videos Recomendados:
React Firebase Auth ➜ • React & Firebase Login...
React Firebase CRUD ➜ • React & Firebase Fires...
Mongoose ➜ • Mongoose | Introduccci...
Curso de Nodejs ➜ • Nodejs Curso Desde Cer...
Thunder Client ➜ • Thunder Client - Postm...
Variables de Entorno en Nodejs ➜ • Variables de Entorno e...
Curso de Git ➜ • Git y Github | Curso P...
Rest client VSCode ➜ • Rest Client | Extensio...
Mongodb Atlas ➜ • MongoDB Atlas, NoSQL e...
👨💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ bit.ly/3ijsVNW
SiteGround ➞ bit.ly/31u9ZEk
DigitalOcean ➞ m.do.co/c/8ef2...
Expo ➞ bit.ly/2WpYKtx
Cloudinary ➞ bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9
#firebase #react #javascript
Excelente video hermano! Me vino de 10 para resolver varias dudas que tenia a la hora de encarar proyectos que manipulan archivos
Este video es una joya en bruto @fazt, muchas gracias! 🏗
Fazt, eres el mejor. Tus últimos tutoriales son oro puro. No pares.
Podrías hacer un tutorial similar pero para subir imágenes a Cloudinary?
Ese es uno de los que voy a subir pronto, aunque iba a dar una introduccion practica primero usando Javascript.
Creo que es buena idea elaborar uno con react tambien. Por cierto tambien lo use cloudinary en este ejemplo con React, lo dejo por aqui:
ruclips.net/video/_zGL_MU29zs/видео.html
Fazt tus vídeos llegan en el momento adecuado, gracias a ti, me ayudas mucho!.
muchisimas gracias genio impecable la explicacion al detalle!
Excelente explicacion! Muchas gracias!
Este hombre se merece un camión de cerveza, tanto tiempo brindando conocimiento de primer nivel ! Sigo ansioso esperando el vídeo de React Testing :) gracias !
la verdad FAZT que te pasas!! TREMENDO video hermano, todo tu contenido es muy bueno y espero que sigas asi... son clases que las valoro muchisimo asi que agradezco mucho tu ayuda!! GRACIAS
Muy bien video fazt, nunca me los pierdo, es bastante sencillo con firebase al parecer, llevo días rompiéndome la cabeza para hacerlo con nodejs, creo cambiaré a firebase
No es tan difícil, si esperas un poco publicaré un video de como subir archivos usando Nodejs con cloudinary
Hola, muchas gracias, excelente video. Estoy haciendo una pagina personal y me sirve mucho esta información
Espectacular video! Me re sirvió para mi proyecto. Muchas gracias.
Increible tu contenido!! MUCHAS GRACIAS!!
gracias fazt, mereces un nobel de docencia !
Grande Fazt , cuando dijiste que lo subirias , no pensé que sería tan rápido ,me han ayudado mucho tus vídeos , gracias ❤️
También puedes utilizar como nombre el user uid del usuario para guardar la imagen es mejor para no acumular imágenes que después no se van a utilizar 16:50
Siempre haces tutorials excelentes!
Con respecto a los nombres de la imagen, lo que hice fue que la función "uploadFile" reciba dos parámetros, el segundo es el nombre de la imagen y se accede desde el evento, así "event.target.files[0].name". Entonces en el onChange quedaría algo así como "onChange = { (event) => uploadFile( event.target.files[0], event.target.files[0].name }" y claro que luego agrego el segundo parámetro como segudno parametro en el ref(), y queda algo así "const storageRef = ref(storage, segundoParametro);" y si tienen que guardarlo en alguna carpeta del storage "const storageRef = ref(storage, `carpeta/${segundoParametro}`);".
Creo en Fazt todopoderoso que me fortalece!!!!
Excelente! Muchas Gracias!
hola fazt como podemos ponerle un limite al tamaño del archivo que suben?
Muchas gracias! Podrías hacer un video para poner un botón que permita al usuario descargar un archivo ? Usando React con Firebase
Gracias!
Maestro de maestros.
nah bro sos un amo
Hola fazt Gracias por tus video nuevamente. puedes hacer un video amigo explicando el concepto de HTTP y como aplicarlo de una forma correcta. te lo agradeceria hermano
VIDEAZO
sos crack
con v4 como meto la imagen dentro de una carpeta? intente cambiando storage por "Products/" pero no funciona. Products seria mi carpeta en el storage donde quiero meter las imagenes.
Fazt puedo guardar videos a firebase? es decir que mi cliente permita sibir archivos mp3 a firebase y luego recuperar esos archivos
buen tuto veos tu videos y eres el unico que consigo que explica herramientas especificas podrias aclararme una duda es mejor usar firebase que node.s,php o cualquier otro
Pero a la hora de deployar como quedaria el archivo config.firebas para no subirlo?
También me pregunto lo mismo. Pudiste averiguar? Quizás con variables de entorno creadas en netlify o vercel?
Hola amigo Fazt, el día que hice este ejercicio todo me salió bien, todo ok. Pero por alguna razón ahora no funciona como es porque la subida desde mi pc local a storage me da como resultado un archivo que no es de tipo imágen sino application/octet... algo así y de 9 B. Ya agoté todos los recursos de la documentación y nada ya que configuré los metadatos como me dice la documentación osea, el contentType lo pase a "image/jpeg" y ni aún así se sube como imágenes sino como octet y eso ni se puede abrir.
Cómo restringo a que solo se puedan subir imagenes jpg o archivos pdf? Y limitar el peso de la imagen? Se hacerlo en js vanilla pero no con react
Y como se le agrega el antispan NO soy un robot
gracias fazt! queriamos aprender esto también, sí! es increible lo útil que es todo lo que enseñas, aunque lo use ya o tarde en usarlo es super útil, incluso si lo canvian tal como lo enseñas seguro que nos adaptariamos igual... y si cambia mucho pues con lo majo que eres seguro que nos lo enseñas a usar de nuevo jeje ;) un abrazo! una cosa, en el curso de sql que acabas de sacar dices que pones un video de aprender sql y no lo veo. supongo que aunque tengo pocos conceptos de sql (tus clases de mongodb las vi todas pero de sql no, o algo muy basico) crees que lo podré aprender con el propio video de mern sql o tienes un video introductorio de sql que me aconsejas ferreamente antes de ver el mern con sql y por fin aprender tb sql que le tenia mania por ser mas lento que mongodb pero era una tonteria de mi cabeza o al menos tenia prioridad en centrarme en algo pero en verdad mola aprenderlo todo :)
a si, antes en el proyecto que queria empezar queria utilizar cloudinary pq lo explicas muy bien, pero si al final ya utilizara firebase para otras cosas mejor ya me quedo con subirlas a firebase o igualmente cloudinary tiene algunas virtudes de más? podrias comentarlo un poco un firebase storage vs cloudinary pros i contras o algo para saber que escoger según la situación o propiedades diferentes de cada uno y situación propia
Necesito guardar videos desde mi cliente pero no quiero guardarlos en mi servidor , porque sobrecargaria mucho el servidor , como puedo subir videos y recuperarlos , Muchas gracias
Excelente video!
Cómo se podría hacer con nodejs y mysql?
Genial
Buen video fazt
Muy bueno el tutorial y muchas gracias, pero por ver el tutorial no escribo el código. Estaría muy bien si lo dejaras en Github
Hola , como seria en el caso si yo quisiera suber en la nube archivos csv? Gracias
Ya habia visto el video dos veces y esta es la tercera, pero hoy fue para aplicarlo, se me hizo raro que en la descripcion no dejaras el repositorio, no me quejo solo que siempre lo haces.
Fazt bro , de casualidad será muy diferente hacerlo solo con javascript ? o sea cambiara mucho la forma de hacerlo ?
Como va esto respecto a los costos, te cobran llegado a cierta cantidad de almacenamiento?
Saludos! amigos alguien sabe como insertar una url de firebase en un documento pdf en react???
Hola, tengo una consulta como hago para subir un array de objetos?? por ejemplo la constante productos:
const productos = [
{
id:1,
name:'Hamburguesa',
price: 10,
unit:"Unidad"
},
{
id:2,
name:'Milanesas',
price: 100,
unit:"Unidad"
},
]
Para eso esta el firestore, la base de datos de firebase
muchas gracias maestro Fazt, una consulta, tienes tutorial sobre como documentar asi como mostraste el en minuto 27:07 ?
Saludos Fazt!... gracias por todos tu videos muy muy educativos como siempre!... me gusta esa consola que tienes se ve muy pro, podrias hacer un video de como instalar u otras que se vean igual de pro? Gracias.
De hecho ya he publicado como configurar la misma consola: Mejorando el Powershell de Windows con OhmyPosh, Windows Terminal y NerdFonts
ruclips.net/video/d9y0l7yY404/видео.html
@@FaztCode de verdad?!... Realmente no busque😅... Gracias, se me olvido comentar que uso linux 😅
@@FaztCode Ya encontré otro de tus videos Alacritty para linux 😁
Fazt puedes hacer un ejemplo sencillo de microservicios con nodejs / express plisss
Lo apunto para hacer un ejemplo pronto
Gran video fazt, también se puede subir varias imágenes a la vez?
Si tambien es posible, de hecho lo apunto para crear un ejemplo :)
Buenísimo! React es muy bueno y tienes el dato perfecto para hacer tutoriales, deberías hacer uno con microservicios de node, o react con mysql perdón si es muy novato pero me gustaría saber como se hace!! Saludos
Que tal Fazt buen video podrías hacer uno de como descargar documentos pdf de firebase usando flutter aplicativo web y móvil
muchas gracias fazt buenísimo podrías hacernos un video para subir nuestros propios videos o imagenes con react nodejs mysql tipo como tiktok
Un clon de TikTok es buena idea :)
@@FaztCode si tío también hace tiempo te escribí también para que si podías hacer un clon de zoom meet ese yo lo quiero hacer pero no puedo hacerlo porque es muy largo y complicado no como tu que eres un crack en esto tu eres como el Messi de la programación para hacerlo yo solo no puedo y para mi seria como mi sueño crear una aplicación así completa con backend y frontend
Excelente video ! me queda la duda como subir dos o mas fotos a la misma carpeta que creo, ya que me lo pisa. y sube uno solo.
asi intente :
export async function uploadFile(file,file1) {
const storageRef = ref(storage,`${v4()}/${v4()}`)
return await uploadBytes(storageRef,file,file1)
}
const [file, setFile] = useState(null)
const [file2, setFile2] = useState(null)
const handleSubmit = async (e) => {
e.preventDefault()
try{
const result = await uploadFile(file,file2)
console.log(result)
}catch(error){
console.log(error)
}
}
Master 😶🌫️
👍
@@FaztCode 👍
Fazt, quizás está pregunta sea un poco tonta, pero como uuid sabe que el string que genera no se encuentra ya guardado en la base de datos? 🤔
No hay forma directa de que uuid conozca el string
Por otro lado si es que la db tiene el id como llave primaria deberia tirar un error y en caso que salte el error solo generarias otro, pero nuevamente este escenario es casi imposible
En informatica no existe lo aleatorio. Se le conoce como pseudo-aleatorio ya que muchas veces en un entorno prácticamente identico podria arrojar un mismo resultado.
Esto de un tipo random en StackOverflow:
For UUID4 I make it that there are approximately as many IDs as there are grains of sand in a cube-shaped box with sides 360,000km long. That's a box with sides ~2 1/2 times longer than Jupiter's diameter.
Añado: la cantidad de posibilidades si no me falla el calculo rapido es algo asi como:
340282366920938463463374607431768211456
La cantidad de humanos existentes son como 10 digitos.
Basicamente ni asi cada uno tubiera acceso a Internet y subieran 10 imagenes seria casi imposible que resultara la misma cadena
sabes que sería genial? que las imágenes se muestren en un carrusel o un card etc, no sé sí sea posible, tal vez puedas hacer un vídeo, por favor
Estoy buscando lo mismo, necesito subir las imagines a distintas cards. Encontraste la manera? agradecería la info
@@marioriera437 me olvidé de eso hace tiempo cuando no era muy experimentado, peor ahora pienso que la manera de hacerlo es listar todas las imágenes en mismo lugar y luego ordenarlos
@@devsilva7155 pucha me falta experiencia aún como pa entender y hacer eso bien :( tendrá q ser prueba y error nomas. Gracias por contestar !
FAZT GRACIAS POR EL VIDEO MASTER ,COMO HARIA PARA SUBIR ARCHIVOS MP3 Y MP4(CANCIONES O VIDEOS)
El proceso es exactamente el mismo, la subida de archivos es para cualquier tipo de contenido, solo que se uso imágenes de ejemplo aquí :)
@@FaztCode ohhhhh excelente gracias master!!!
Hey Fazt !! .. im a great fan of your channel !! ... can you do a video tutorial on React unit testing (TDD), maybe using Jest and react-testing-library ? .. and again thank you very much for your awesome tutorials content !!! 😎👍
Thanks romi, Sure. I'll create a simple example in a few days
@@FaztCode My doubt is mocking an API request amd display the data.. Thank you very much Fazt... 😊👍
@@FaztCode bgj
Hvh
Jhkbh
Crea uno con apollo server y angular
Lo apunto para crearlo :)
@@FaztCode gracias
como hacer el GET, a ese storage? para renderizar las imagenes?
Puedo subir un audio y luegó con la URL usarlo para hacer un reproductor de música?
Si así es, puedes subir cualquier archivo :)