Tengo Angular ejecutándose en FrontEnd y Firebase Admin SDK para Node.js en BackEnd.
Lo que quiero lograr es permitir que el usuario seleccione una imagen de su computadora, usando un simple <input> de tipo file . Cuando recibo la imagen de usuario que es de tipo File en el lado Angular, quiero enviarla a mi servidor Node.js y dejar que la cargue en Firebase Storage.
Así es como estoy enviando la imagen a Node.js:
method(imageInput): void { const image: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { const imageData = { source: event.target.result, file: image } this.myService.uploadImage(imageData.file).subscribe( (res) => { // image sent successfully }, (err) => { // error }) }); reader.readAsDataURL(image); } Entonces, en el lado de Node.js, no veo una forma de cargar esta imagen.
Lo estoy intentando:
admin.storage().bucket().upload(imageFromAngular, { --> Here's the problem destination: "someDestination/", contentType: "image/png", metadata: { contentType: "image/png" } }).then(() => { // send successful response }).catch(err => { // send error response }); El problema viene por el hecho de que el método de upload solo toma como parámetro la ruta a la imagen y las opciones. Sin embargo, en este caso no puedo pasar la ruta a la imagen, sino que puedo pasar la imagen en sí. Leí esto: https://googleapis.dev/nodejs/storage/latest/ pero no pude encontrar nada que se adaptara a mis necesidades.
¿Cuál sería la forma correcta de hacer esto?
Aquí hay una explicación más detallada del enfoque que tomé:
Estoy usando el método arrayBuffer del archivo de image dentro de mi method . Este método devuelve una promesa de tipo ArrayBuffer. Obtengo el valor y lo envío a mi servidor.
El servidor usa Buffer.from(ArrayBuffer, 'base64') para convertir los datos y luego puedo usar de forma segura la API de save ( https://googleapis.dev/nodejs/storage/latest/File.html#save ).
Para obtener la imagen más adelante, uso la download - (https://googleapis.dev/nodejs/storage/latest/File.html#download ).
Puede escribir un flujo de bytes (o un Buffer ) en Cloud Storage.
createWriteStream() para transmitir datos a Cloud Storage: https://googleapis.dev/nodejs/storage/latest/File.html#createWriteStreamsave() para escribir datos almacenados en búfer en Cloud Storage: https://googleapis.dev/nodejs/storage/latest/File.html#save