¿Cómo subir una imagen a firebase desde una aplicación de Ionic?
En este tutorial voy a mostrar como subir una imagen desde una aplicación de Ionic a una base de datos de Firebase.
Vamos a utilizar principalmente tres plugins:
- angularfire2 para la comunicación entre la aplicacion de ionic con la base de datos de firebase.
- ImagePicker para tomar las imágenes de la galería del celular.
- También vamos a agregar la funcionalidad de cortar la imagen una vez seleccionada de la galería. Para esto vamos a usar Crop plugin.
Instalación
Vamos a comenzar con una aplicación en Ionic. Puedes descargarte gratuitamente éste ejemplo o puedes crear tu propia app de cero. Para conocer más sobre cómo comenzar con Ionic Framework te sugiero que leas el siguiente manual.
Para instalar los plugins que se mencionaron en la introducción, debemos correr los siguientes comandos desde nuestra consola.
angularfire plugin:
npm install firebase angularfire2 — saveImagePicker plugin:
ionic cordova plugin add cordova-plugin-telerik-imagepicker — variable PHOTO_LIBRARY_USAGE_DESCRIPTION=”your usage message”npm install — save @ionic-native/image-picker
Crop plugin:
ionic cordova plugin add cordova-plugin-cropnpm install — save @ionic-native/crop
Configuración de firebase
Una vez instalados los plugin debemos crear un proyecto en la consola de firebase, el cual nos dirigirá al siguiente menú:
Ahora debes clickear en “Add Firebase to your web app” y veremos las credenciales de nuestra aplicación de firebase.
El próximo paso es agregar estas credenciales en nuestro proyecto de ionic. Para esto buscamos el archivo environment.ts ubicado en src/environment/ y agregamos lo siguiente :
//environment.ts
export const environment = {
production: false,
firebase: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID"
}
};Ten en cuenta que tienes que reemplazar las constantes con tu valores.
Felicitaciones! Hemos terminado con el proceso de instalación. En este momento estamos prontos para seguir con la implementación.
Implementación
En nuestro ejemplo hemos creado una aplicación de Ionic super sencilla que solamente tiene dos botones, uno para seleccionar una imagen de la galería de nuestro teléfono y guardarla en la base de datos de Firebase, y el otro con el agregado de cortar la imagen (usando el Crop plugin) y luego guardarla en Firebase.
Para realizar las operaciones relacionadas con interactuar con la base de datos de firebase, crearemos un servicio en nuestra aplicación de ionic al cual llamaremos FirebaseService. En este servicio crearemos un método uploadImage el cual recibirá la URI que nos brinda el plugin de ImagePicker y guardará la imagen en el storage de firebase.
uploadImage(imageURI){
return new Promise<any>((resolve, reject) => {
let storageRef = firebase.storage().ref();
let imageRef = storageRef.child('image');
this.encodeImageUri(imageURI, function(image64){
imageRef.putString(image64, 'data_url')
.then(snapshot => {
resolve(snapshot.downloadURL)
}, err => {
reject(err);
})
})
})El Firebase Storage es una herramienta que nos brinda firebase para guardar archivos, es independiente de las bases de datos que provee Firebase (tanto Realtime como Firestore).
Dentro de función uploadImage() tenemos lo siguiente:
storageRef representa una referencia a la raíz del Storage.
imageRef es la referencia a una ubicación en un nivel inferior del Storage, se utiliza el método child() en una referencia especifica. Es por eso que las imágenes que subamos a Firebase van a quedar guardadas dentro de la carpeta image.
encodeImageUri() es una función que explicaremos más abajo pero sirve para transformar una URI a una URL base 64.
imageRef.putString() es la función para subir el string de la URL base 64 al Storage y una vez que logra subir nuestra imagen firebase nos retorna la url de destino de la imagen.
Otro punto a tener en cuenta es que debemos transformar la URI a una URL en base 64. Para eso hemos creado la siguiente función a la cual llamamos en la función anterior uploadImage() .
encodeImageUri(imageUri, callback) {
var c = document.createElement('canvas');
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function () {
var aux:any = this;
c.width = aux.width;
c.height = aux.height;
ctx.drawImage(img, 0, 0);
var dataURL = c.toDataURL("image/jpeg");
callback(dataURL);
};
img.src = imageUri;
};Cómo conectar lo anterior con tu aplicación móvil hecha con Ionic?
Ahora veremos en qué momento se utilizan las funciones anteriores al accionar los botones de nuestro ejemplo.
Si lo que buscas es una aplicación de ionic super completa y con un montón de funcionalidades y componentes, te sugiero que le des una mirada a Ion2FullApp ELITE. De seguro te ahorrará muchísimo tiempo de desarrollo.
Empecemos por el método de seleccionar una imagen pero sin usar la opción de cortarla:
openImagePicker(){
this.imagePicker.hasReadPermission()
.then((result) => { if(result == false){ // no callbacks required as this opens a popup which returns
async
this.imagePicker.requestReadPermission();
}
else if(result == true){
this.imagePicker.getPictures({
maximumImagesCount: 1
})
.then((results) => {
for (var i = 0; i < results.length; i++) {
this.uploadImageToFirebase(results[i]);
}
}, (err) => console.log(err));
}
}, (err) => {
console.log(err);
});
}
Como vemos el resultado del plugin imagePicker es una lista de fotos la cual se puede limitar con la propiedad “maximumImagesCount”. En este ejemplo se limitó a una sola foto.
Una vez seleccionada la foto, se llama a otro método el cual interactúa con nuestro FirebaseService para luego subir la imagen al storage de firebase:
uploadImageToFirebase(image){
image = normalizeURL(image);
//uploads img to firebase storage
this.firebaseService.uploadImage(image)
.then(photoURL => {
let toast = this.toastCtrl.create({
message: 'Image was updated successfully',
duration: 3000
});
toast.present();
})
}normalizeURL es un método que se usa para normalizar la url absoluta de la imagen de modo que funcione en todos los dispositivos. Puedes leer más información sobre éste método acá.
Felicidades! Ya has aprendido cómo subir una imagen al firebase storage desde tu aplicación de Ionic. En la siguiente imagen puedes ver que ha quedado subida correctamente en nuestra carpeta “image”.
Ahora agreguemos la dificultad de usar el Crop plugin. El crop plugin nos permite recortar fácilmente una image desde nuestra app de ionic.
El código es muy simple y similar al paso anterior, la diferencia es que una vez seleccionada la imagen usando el image picker plugin, llamamos al crop plugin el cual nos retorna la imagen recortada la cual subiremos al storage.
openImagePickerCrop(){
this.imagePicker.hasReadPermission()
.then((result) => {
if(result == false){
// no callbacks required as this opens a popup which returns
async
this.imagePicker.requestReadPermission();
}
else if(result == true){
this.imagePicker.getPictures({
maximumImagesCount: 1
})
.then((results) => {
for (var i = 0; i < results.length; i++) {
this.cropService.crop(results[i], {quality: 75})
.then(newImage => {
this.uploadImageToFirebase(newImage);
}, error => console.error("Error cropping image", error));
}
}, (err) => console.log(err));
}
}, (err) => {
console.log(err);
});
}Conclusión
En este tutorial hemos aprendido cómo subir archivos desde la galería del celular al storage de firebase. Además como funcionalidad adicional aprendimos a cortar la imagen seleccionada.
Si quieres aprender más sobre manejo de imágenes desde tu aplicativo de ionic te recomiendo la siguiente guía.
Si deseas seguir aprendiendo sobre firebase estate atento a los próximos tutoriales en donde estaré escribiendo sobre como hacer un CRUD utilizando Cloud Firestore. Puedes suscribirte a nuestra newsletter para enterarte cuando el tutorial esté disponible en este link.
Espero que este tutorial te haya sido de gran ayuda, si tienes alguna pregunta no dudes en dejar un comentario en la sección de abajo.
