Hoe afbeeldingen uploaden naar Firebase vanuit een Android-app

Firebase is een platform voor ontwikkeling van mobiele en webtoepassingen en Firebase Storage biedt veilige bestandsuploads en downloads voor Firebase-apps. In dit bericht bouw je een Android-applicatie met de mogelijkheid om afbeeldingen te uploaden naar Firebase Storage.

Firebase-instellingen

Als u nog geen Firebase-account heeft, kunt u er een maken op de startpagina van Firebase.

Zodra uw account is ingesteld, gaat u naar uw Firebase-console en klikt u op de Voeg project toe om een ​​nieuw project toe te voegen.

Voer je projectdetails in en klik op de Maak een project knop wanneer klaar. Klik op de volgende pagina op de link naar Voeg Firebase toe aan uw Android-app.

Voer de naam van het toepassingspakket in. Mijn applicatiepakket is com.tutsplus.code.android.tutsplusupload. Merk op dat de pakketnaam namespaced is met een unieke string die u of uw bedrijf identificeert. Een eenvoudige manier om dit te vinden, is door het te openen Hoofdactiviteit bestand en kopieer de pakketnaam vanaf de bovenkant.

Als u klaar bent, klikt u op Registreer App. Op de volgende pagina krijgt u een google-services.json om te downloaden naar uw computer. Kopieer en plak dat bestand in de app-map van uw applicatie. (Het pad zou zoiets moeten zijn TutsplusUpload / app.)

Firebase-machtigingen instellen

Als u wilt dat uw app toegang heeft tot Firebase Storage, moet u machtigingen instellen in de Firebase-console. Klik vanuit uw console op opslagruimte, en klik vervolgens op Reglement.

Plak de onderstaande regel en publiceer. 

service firebase.storage match / b / bucket / o match / allPaths = ** allow read, write: if true; 

Hiermee hebt u lees- en schrijftoegang tot uw Firebase-opslagruimte.

Maak de applicatie

Open Android Studio en maak een nieuw project. Je kunt je project bellen wat je wilt. Ik heb de mijne gebeld TutsplusUpload.

Voordat u verder gaat, moet u een aantal afhankelijkheden toevoegen. Klik op het linkerdeel van je Android Studio Graden-scripts.

Open bouwen.gradle (Project: TutsplusUpload), en voeg deze regel code toe in het blok afhankelijkheden.

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

Open vervolgens bouwen.gradle (Module: app) om de afhankelijkheden voor Firebase toe te voegen. Deze gaan ook in het blok afhankelijkheden. 

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

Eindelijk, buiten het gebied van afhankelijkheden, voeg je de plug-in toe Google-services.

 plug-in toepassen: 'com.google.gms.google-services'

Opslaan wanneer klaar, en het zou moeten synchroniseren.

Stel de Hoofdactiviteit lay-out

De applicatie heeft één activiteitslay-out nodig. Er zijn twee knoppen nodig: een om een ​​afbeelding op uw apparaat te selecteren en de andere om de geselecteerde afbeelding te uploaden. Nadat u de afbeelding hebt geselecteerd die u wilt uploaden, wordt de afbeelding weergegeven in de lay-out. Met andere woorden, de afbeelding wordt niet ingesteld vanuit de lay-out maar vanuit de activiteit.

In uw Hoofdactiviteit lay-out, gebruikt u twee lay-outs: de lineaire lay-out wordt genest in de relatieve lay-out. Begin met het toevoegen van de code voor uw relatieve lay-out.

  

De Relatieve layout neemt de volledige ruimte in die door het apparaat wordt geboden. De LinearLayout zal in de Relatieve layout, en heeft de twee knoppen. De knoppen moeten naast elkaar worden geplaatst, dus de richting die moet worden gebruikt voor de LinearLayout zal horizontaal zijn.

Hier is de code voor de lineaire lay-out.

  

Uit de bovenstaande code kunt u zien dat aan beide knoppen id's zijn toegewezen. De ids worden gebruikt om de knop van de hoofdactiviteit te richten zodat wanneer er op de knop wordt geklikt, een interactie wordt geïnitieerd. Dat zul je snel merken.

Onder de LinearLayout, voeg de code toe voor de Figuurweergave.

Je kunt ook zien dat het Figuurweergave heeft een ID kaart; u zult dit gebruiken om de lay-out van de geselecteerde afbeelding te vullen. Dit wordt gedaan in de hoofdactiviteit.

Krijgen Hoofdactiviteit omhoog

Navigeer naar uw Hoofdactiviteit, en begin met het aangeven van velden. Deze velden worden gebruikt om uw views te initialiseren (de knoppen en Figuurweergave), evenals de URI die aangeeft waar de afbeelding vandaan komt. Voeg dit toe aan je hoofdactiviteit, boven de onCreate methode.

 private Button btnChoose, btnUpload; privé ImageView imageView; privé Uri-bestandPath; private finale int PICK_IMAGE_REQUEST = 71;

PICK_IMAGE_REQUEST is de aanvraagcode gedefinieerd als een instantievariabele.

Nu kunt u uw weergaven initialiseren zoals:

 // Initialize Views btnChoose = (Button) findViewById (R.id.btnChoose); btnUpload = (Button) findViewById (R.id.btnUpload); imageView = (ImageView) findViewById (R.id.imgView);

In de bovenstaande code maakt u nieuwe exemplaren van Knop en Figuurweergave. De exemplaren wijzen naar de knoppen die u in uw lay-out hebt gemaakt.

U moet een luisteraar instellen die luistert naar interacties op de knoppen. Wanneer een interactie plaatsvindt, wilt u een methode aanroepen die de selectie van een afbeelding uit de galerij activeert of de upload van de geselecteerde afbeelding naar Firebase.

Stel onder de geïnitialiseerde weergaven de luisteraar in voor beide knoppen. De luisteraar ziet er zo uit.

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

Dit zou in de onCreate () methode. Zoals ik hierboven vermeldde, noemen beide knoppen een andere methode. De Kiezen knop roept de chooseImage () methode, terwijl de Uploaden knop roept de afbeelding uploaden() methode. Laten we die methoden toevoegen. Beide methoden moeten buiten de onCreate () methode.

Laten we beginnen met de methode om een ​​afbeelding te kiezen. Hier is hoe het eruit zou moeten zien:

 private void chooseImage () Intentintent = new Intent (); intent.setType ( "image / *"); intent.setAction (Intent.ACTION_GET_CONTENT); startActivityForResult (Intent.createChooser (intent, "Select Picture"), PICK_IMAGE_REQUEST); 

Wanneer deze methode wordt aangeroepen, een nieuwe voornemen instantie is gemaakt. Het intentietype is ingesteld op afbeelding en de actie is ingesteld om wat inhoud te krijgen. De intentie maakt een dialoogvenster voor de afbeeldingskiezer waarmee de gebruiker door de apparaatgalerij kan bladeren om de afbeelding te selecteren. startActivityForResult wordt gebruikt om het resultaat te ontvangen, wat de geselecteerde afbeelding is. Om deze afbeelding weer te geven, maakt u gebruik van een methode genaamd onActivityResult.

onActivityResult ontvangt een aanvraagcode, resultaatcode en de gegevens. In deze methode controleert u of de aanvraagcode gelijk is PICK_IMAGE_REQUEST, met de resultaatcode gelijk aan RESULT_OK en de beschikbare gegevens. Als dit allemaal waar is, wilt u de geselecteerde afbeelding weergeven in de Figuurweergave.

Onder de chooseImage () methode, voeg de volgende code toe.

 @Override beschermde leegte onActivityResult (int requestCode, int resultCode, Intent-gegevens) super.onActivityResult (requestCode, resultCode, data); if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK && data! = null && data.getData ()! = null) filePath = data.getData (); probeer Bitmap bitmap = MediaStore.Images.Media.getBitmap (getContentResolver (), filePath); imageView.setImageBitmap (bitmap);  catch (IOException e) e.printStackTrace (); 

Het bestand uploaden naar Firebase

Nu kunnen we de methode implementeren voor het uploaden van de afbeelding naar Firebase. Verklaar eerst de velden die nodig zijn voor Firebase. Doe dit onder de andere velden die je hebt aangegeven voor je klas.

 // Firebase FirebaseStorage-opslag; StorageReference storageReference;

opslagruimte wordt gebruikt om een ​​te maken FirebaseStorage bijvoorbeeld, terwijl storageReference zal naar het geüploade bestand wijzen. In jouw onCreate () methode, voeg de code toe om dat te doen-maak een FirebaseStorage exemplaar en verkrijg de opslagreferentie. Verwijzingen kunnen worden gezien als verwijzingen naar een bestand in de cloud.

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

Hier is wat de afbeelding uploaden() methode zou moeten lijken.

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

Wanneer de afbeelding uploaden() methode wordt aangeroepen, een nieuw exemplaar van ProgressDialog is geïnitialiseerd. Een tekstbericht waarin de gebruiker wordt getoond dat de afbeelding wordt geüpload, wordt weergegeven. Dan een verwijzing naar de geüploade afbeelding, storageReference.child (), wordt gebruikt om toegang te krijgen tot het geüploade bestand in de afbeeldingen map. Deze map wordt automatisch gemaakt wanneer de afbeelding wordt geüpload. Luisteraars zijn ook toegevoegd, met toast-berichten. Deze berichten worden weergegeven afhankelijk van de staat van de upload.

Stel toestemming in de app in

Ten slotte moet u toestemming vragen die uw toepassing zal gebruiken. Zonder dit kunnen gebruikers van uw toepassing niet door hun apparaatgalerij bladeren en met uw toepassing verbinding maken met internet. Dit is eenvoudig - gewoon het volgende in je plakken AndroidManifest het dossier. Plak het net boven de toepassing element tag.

  

Dit vraagt ​​om toestemming om internet te gebruiken en om externe opslag te lezen.

De app testen

Ga nu door en voer je applicatie uit! U moet in staat zijn om een ​​afbeelding te selecteren en deze met succes naar Firebase te uploaden. Om de geüploade afbeelding te bevestigen, gaat u terug naar uw console en vinkt u het bestanden een deel van uw opslagruimte.

Conclusie

Firebase biedt ontwikkelaars veel voordelen, en het uploaden van bestanden met opslag is daar een van. Het uploaden van afbeeldingen vanuit uw Android-applicatie vereist dat u met activiteiten en intenties werkt. Door deze zelfstudie te volgen, is uw kennis van activiteiten en intenties verdiept. ik hoop dat je het leuk vond!

!