Cómo subir imágenes a Firebase desde una aplicación de Android

Firebase es una plataforma de desarrollo de aplicaciones web y móviles, y Firebase Storage proporciona cargas y descargas seguras de archivos para las aplicaciones Firebase. En esta publicación, construirá una aplicación de Android con la capacidad de cargar imágenes en Firebase Storage.

Configuración de base de fuego

Si aún no tiene una cuenta Firebase, puede crear una en la página de inicio de Firebase.

Una vez que haya configurado su cuenta, vaya a su consola Firebase y haga clic en Añadir proyecto botón para agregar un nuevo proyecto.

Ingrese los detalles de su proyecto y haga clic en Crear proyecto botón cuando haya terminado. En la página siguiente, haga clic en el enlace para Agrega Firebase a tu aplicación de Android.

Ingrese el nombre del paquete de su aplicación. Mi paquete de solicitud es com.tutsplus.code.android.tutsplusupload. Tenga en cuenta que el nombre del paquete tiene un espacio de nombre con una cadena única que lo identifica a usted o a su empresa. Una forma fácil de encontrar esto es abrir su Actividad principal archivar y copiar el nombre del paquete desde la parte superior.

Cuando haya terminado, haga clic en Registrar aplicación. En la siguiente página, se le dará una google-services.json para descargar a su computadora. Copie y pegue ese archivo en la carpeta de aplicaciones de su aplicación. (El camino debe ser algo así como TutsplusUpload / app.)

Establecer permisos de base de fuego

Para permitir que su aplicación acceda a Firebase Storage, debe configurar los permisos en la consola de Firebase. Desde su consola, haga clic en Almacenamiento, y luego haga clic en Reglas.

Pegue la regla abajo y publique. 

service firebase.storage match / b / bucket / o match / allPaths = ** permitir leer, escribir: si es verdadero; 

Esto permitirá el acceso de lectura y escritura a su almacenamiento Firebase.

Crear la aplicación

Abre Android Studio y crea un nuevo proyecto. Puedes llamar a tu proyecto lo que quieras. Llamé al mío TutsplusUpload.

Antes de continuar, deberá agregar un par de dependencias. En el panel izquierdo de su Android Studio, haga clic en Guiones de Gradle.

Abierto construir.gradle (Proyecto: TutsplusUpload), Y añada esta línea de código en el bloque de dependencias..

 classpath 'com.google.gms: google-services: 3.0.0'

A continuación, abrir construir.gradle (Módulo: aplicación) Para agregar las dependencias para Firebase. Estos van en el bloque de dependencias también.. 

 compile 'com.google.firebase: firebase-storage: 9.2.1' compile 'com.google.firebase: firebase-auth: 9.2.1'

Finalmente, fuera del bloque de dependencias, agregue el complemento para Servicios de Google.

 aplique el complemento: 'com.google.gms.google-services'

Guardar cuando haya terminado, y debería sincronizarse.

Configurar el Actividad principal Diseño

La aplicación necesitará un diseño de actividad. Se necesitarán dos botones: uno para seleccionar una imagen de su dispositivo y el otro para cargar la imagen seleccionada. Después de seleccionar la imagen que desea cargar, la imagen se mostrará en el diseño. En otras palabras, la imagen no se establecerá desde el diseño sino desde la actividad.

En tus Actividad principal diseño, utilizará dos diseños, anidando el diseño lineal dentro del diseño relativo. Comience agregando el código para su diseño relativo.

los Disposición relativa ocupa todo el espacio proporcionado por el dispositivo. los LinearLayout vivirá dentro del Disposición relativa, y tendrá los dos botones. Los botones deben colocarse uno al lado del otro, por lo tanto, la orientación que se utilizará para el LinearLayout será horizontal.

Aquí está el código para el diseño lineal..

Desde el código anterior, puede ver que ambos botones tienen identificadores asignados. Los identificadores se utilizarán para seleccionar el botón desde la actividad principal, de modo que cuando se hace clic en el botón, se inicia una interacción. Verás eso pronto.

Bajo la LinearLayout, agrega el código para el ImageView.

También puedes ver que el ImageView tiene un carné de identidad; lo utilizará para rellenar el diseño de la imagen seleccionada. Esto se hará en la actividad principal..

Obtener Actividad principal Arriba

Navega a tu Actividad principal, y empezar por declarar campos. Estos campos se utilizarán para inicializar sus vistas (los botones y ImageView), así como el URI que indica desde dónde se seleccionará la imagen. Agregue esto a su actividad principal, arriba del onCreate método.

 Botón privado btnChoose, btnUpload; privado ImageView imageView; uri filePath privado; int final privado PICK_IMAGE_REQUEST = 71;

PICK_IMAGE_REQUEST es el código de solicitud definido como una variable de instancia.

Ahora puedes inicializar tus vistas así:

 // Inicializar vistas btnChoose = (Button) findViewById (R.id.btnChoose); btnUpload = (Button) findViewById (R.id.btnUpload); imageView = (ImageView) findViewById (R.id.imgView);

En el código anterior, estás creando nuevas instancias de Botón y ImageView. Las instancias apuntan a los botones que creaste en tu diseño.

Debe configurar un escucha que escuche las interacciones en los botones. Cuando ocurre una interacción, debes llamar a un método que active la selección de una imagen de la galería o la carga de la imagen seleccionada a Firebase.

Debajo de las vistas inicializadas, configure el oyente para ambos botones. El oyente se ve así..

 btnChoose.setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) chooseImage ();); btnUpload.setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) uploadImage (););

Esto debería estar en el onCreate () método. Como mencioné anteriormente, ambos botones llaman a un método diferente. los Escoger botón llama al ChooseImage () método, mientras que el Subir botón llama al cargar imagen() método. Vamos a añadir esos métodos. Ambos métodos deben ser implementados fuera del onCreate () método.

Vamos a empezar con el método para elegir una imagen. Aquí es cómo debe verse:

 privado void ChooseImage () Intent intent = new Intent (); intent.setType ("image / *"); intent.setAction (Intent.ACTION_GET_CONTENT); startActivityForResult (Intent.createChooser (intención, "Seleccionar imagen"), PICK_IMAGE_REQUEST); 

Cuando se llama este método, un nuevo Intención Se crea la instancia. El tipo de intento se establece en imagen y su acción se establece para obtener algo de contenido. La intención crea un cuadro de diálogo de selección de imágenes que permite al usuario navegar por la galería del dispositivo para seleccionar la imagen. startActivityForResult Se utiliza para recibir el resultado, que es la imagen seleccionada. Para mostrar esta imagen, harás uso de un método llamado onActivityResult.

onActivityResult recibe un código de solicitud, código de resultado y los datos. En este método, verificará si el código de solicitud es igual a PICK_IMAGE_REQUEST, con el código de resultado igual a RESULTADO_OK y los datos disponibles. Si todo esto es cierto, desea mostrar la imagen seleccionada en el ImageView.

Bajo la ChooseImage () Método, agregue el siguiente código.

 @ Override protected void onActivityResult (int requestCode, int resultCode, Intent data) super.onActivityResult (requestCode, resultCode, data); if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK && data! = null && data.getData ()! = null) filePath = data.getData (); intente Bitmap bitmap = MediaStore.Images.Media.getBitmap (getContentResolver (), filePath); imageView.setImageBitmap (mapa de bits);  catch (IOException e) e.printStackTrace (); 

Subiendo el archivo a Firebase

Ahora podemos implementar el método para cargar la imagen a Firebase. Primero, declare los campos necesarios para Firebase. Haga esto debajo de los otros campos que declaró para su clase..

 // Firebase FirebaseStorage storage; StorageReference storageReference;

almacenamiento será utilizado para crear un FirebaseStorage instancia, mientras almacenamientoReferencia apuntará al archivo cargado. Dentro de tu onCreate () método, agregue el código para hacer eso-cree un FirebaseStorage Instalar y obtener la referencia de almacenamiento. Las referencias se pueden ver como punteros a un archivo en la nube.

 almacenamiento = FirebaseStorage.getInstance (); storageReference = storage.getReference ();

Aquí es lo que el cargar imagen() El método debería verse como.

 private void uploadImage () if (filePath! = null) final ProgressDialog progressDialog = new ProgressDialog (this); progressDialog.setTitle ("Subiendo ..."); progressDialog.show (); StorageReference ref = storageReference.child ("images /" + UUID.randomUUID (). ToString ()); ref.putFile (filePath) .addOnSuccessListener (nuevo OnSuccessListener() @Override public void onSuccess (UploadTask.TaskSnapshot taskSnapshot) progressDialog.dismiss (); Toast.makeText (MainActivity.this, "Uploaded", Toast.LENGTH_SHORT) .show (); ) .addOnFailureListener (new OnFailureListener () @Override public void onFailure (@NonNull Exception e) progressDialog.dismiss (); Toast.makeTast.InternetLP. ) .show ();) .addOnProgressListener (nuevo OnProgressListener() @ Omitir public void onProgress (UploadTask.TaskSnapshot taskSnapshot) double progress = (100.0 * taskSnapshot.getBytesTransferred () / taskSnapshot .getTotalByteCount ()); progressDialog.setMessage ("Uploaded" + (int) progress + "%"); ); 

Cuando el cargar imagen() Se llama método, una nueva instancia de ProgressDialog se inicializa. Se muestra un aviso de texto que muestra al usuario que la imagen se está cargando. A continuación, una referencia a la imagen cargada., storageReference.child (), se utiliza para acceder al archivo cargado en el imagenes carpeta. Esta carpeta se crea automáticamente cuando se carga la imagen. También se agregan oyentes, con mensajes de brindis. Estos mensajes se muestran en función del estado de la carga..

Establecer permiso en la aplicación

Por último, debe solicitar un permiso que su aplicación utilizará. Sin esto, los usuarios de su aplicación no podrán navegar por la galería de su dispositivo y conectarse a Internet con su aplicación. Hacer esto es fácil, simplemente pegue lo siguiente en su AndroidManifest expediente. Pégalo justo encima de la solicitud etiqueta de elemento.

Esto solicita permiso para usar Internet y leer almacenamiento externo.

Probando la aplicación

Ahora sigue adelante y ejecuta tu aplicación! Debería poder seleccionar una imagen y cargarla con éxito a Firebase. Para confirmar la imagen cargada, vuelva a su consola y verifique en el Archivos parte de su almacenamiento.

Conclusión

Firebase proporciona a los desarrolladores muchos beneficios, y la carga de archivos con almacenamiento es uno de ellos. Cargar imágenes desde su aplicación de Android requiere que trabaje con Actividades e Intenciones. Al seguir este tutorial, su comprensión de Actividades e intenciones se ha profundizado. Espero que lo hayan disfrutado!

!