简体   繁体   中英

How to get file URL after uploading them to Firebase?

Once you have uploaded a file to Firebase how can you get it's URL so that you can store that for later use? I want to write the URL to a Firebase Database so that other users can access the image.

I am uploading the file like so:

public void uploadFile()
{

    StorageReference filepath = mstorageRef.child("folder").child(filename);

    Uri File= Uri.fromFile(new File(mFileName));

    filepath.putFile(File).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
        @Override
        public void onSuccess(UploadTask.TaskSnapshot taskSnapshot)
        {
            Toast.makeText(MtActivity.this, "Upload Done", Toast.LENGTH_LONG).show();
        }
    });
}

I have confirmed that the files are in fact uploading so now I just need the URL which I can write to my Database. However when I tried to do this:

Uri downloadUrl = taskSnapshot.getMetadata().getDownloadUrl();

It gives me an error and says This method should only be accessed from tests or within private scope

I'm not sure what that means and I also don't know why I would be getting that error since I'm following this example provided by Firebase.

Is there a new way of getting the URL?

Also, is that URL unique to that item in particular? Meaning if I store it to a database and try to access it later will I be able to do so?

You're using UploadTask.getDownloadUrl() which is deprecated. You can use StorageReference.getDownloadUrl() .

In your case you can try this as -

 filepath.putFile(File).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
    @Override
    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot)
    {
         filepath.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                    @Override
                    public void onSuccess(Uri uri) {
                        Uri downloadUrl = uri;
                       //Do what you want with the url
                    }
        Toast.makeText(MtActivity.this, "Upload Done", Toast.LENGTH_LONG).show();
    }
});

Take care that StorageReference.getDownloadUrl() returns Task, which must be handled asynchronously, you cannot do Uri downloadUrl = photoRef.getDownloadUrl().getResult(); else you will get java.lang.IllegalStateException: Task is not yet complete

This method works too and is a little bit simpler.

It's not something "incredible", but it reduces your code to a few lines. Hope that it's a helpful answer.

StorageReference filepath = mstorageRef.child("folder").child(filename);
filepath.putFile(File).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
        @Override
        public void onSuccess(UploadTask.TaskSnapshot taskSnapshot){
            Uri downloadUrl = filepath.getDownloadUrl();  // here is Url for photo  
            Toast.makeText(MtActivity.this, "Upload Done", Toast.LENGTH_LONG).show();
        }
});

As already mentioned above, StorageReference.getDownloadUrl() returns Task.

Here is my code:

        filepath.putFile(imageUri).addOnCompleteListener(new OnCompleteListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onComplete(@NonNull Task<UploadTask.TaskSnapshot> task) {
                if(task.isSuccessful()){

                    filepath.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            Uri downloadUri = uri;
                            String download_url = uri.toString();
                            mUserDatabase.child("image").setValue(download_url).addOnCompleteListener(new OnCompleteListener<Void>() {
                              @Override

                                public void onComplete(@NonNull Task<Void> task) {

                                   if(task.isSuccessful()) {

                                          mProgressDialog.dismiss();
                                          Toast.makeText(SettingActivity.this, "Successfully uploaded", Toast.LENGTH_LONG).show();

                                   }else {
                                       Toast.makeText(SettingActivity.this, "Error happened during the upload process", Toast.LENGTH_LONG).show();
                                   }
                                }
                            });
                        }
                    });


                }else{
                    Toast.makeText(SettingActivity.this, "Error happened during the upload process", Toast.LENGTH_LONG ).show();
                }
            }
        });

Here is hot I did it

1) This is my Upload and get http url code:

UploadTask uploadTask = FirebaseStorage.getInstance().getReference().child("id").child("filename")
                                .putFile(uri);
                        Task<Uri> urlTask = uploadTask.continueWithTask(new Continuation<UploadTask.TaskSnapshot, Task<Uri>>() {
                            @Override
                            public Task<Uri> then(@NonNull Task<UploadTask.TaskSnapshot> task) throws Exception {
                                if (!task.isSuccessful()) {
                                    throw task.getException();
                                }

                                // Continue with the task to get the download URL
                                return FirebaseStorage.getInstance().getReference().child(user.getUid()).child(avatarName).getDownloadUrl();
                            }
                        }).addOnCompleteListener(new OnCompleteListener<Uri>() {
                            @Override
                            public void onComplete(@NonNull Task<Uri> task) {
                                if (task.isSuccessful()) {
                                    Uri downloadUri = task.getResult();
                                    FirebaseDatabase.getInstance().getReference().child(user.getUid())
                                            .child(avatarName)
                                            .child("avatar_image")
                                            .setValue(downloadUri.toString());
                                    Toast.makeText(getContext(), "Success", Toast.LENGTH_SHORT).show();
                                } else {
                                    // Handle failures
                                    // ...
                                    Toast.makeText(getContext(), "Failed", Toast.LENGTH_SHORT).show();
                                }
                            }
                        });

2) This my onActivityResult code after pickup image from gallery

@Override
public 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) {

        uri = data.getData();

        try {
            bitmap = MediaStore.Images.Media.getBitmap(getContext().getContentResolver(), uri);
            // Log.d(TAG, String.valueOf(bitmap));
            ivAvatarPic.setImageBitmap(bitmap);
            //ImageView imageView = (ImageView) findViewById(R.id.imageView);
            //imageView.setImageBitmap(bitmap);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

Use following code

val imageGalleryRef = storageReference?.child(name + "_gallery")
            val uploadTask = imageGalleryRef.putFile(file)
            uploadTask.addOnFailureListener({ e ->
                Log.e(TAG, "onFailure sendFileFirebase " + e.message)
            }).addOnCompleteListener(
                    object : OnCompleteListener<UploadTask.TaskSnapshot> {
                        override fun onComplete(p0: Task<UploadTask.TaskSnapshot>) {
                            imageGalleryRef.downloadUrl.addOnSuccessListener { e ->
                                run {
                                     downloadUrl = e.toString() // e is image download Uri
                                }
                            }
                        }
                    }

            )

Try this one:

 filepath.putFile(File).addOnCompleteListener(new OnCompleteListener<UploadTask.TaskSnapshot>() {
         @Override
         public void onComplete(@NonNull Task<UploadTask.TaskSnapshot> task) {
            if(task.isSuccessful()){
                 String fileUri = task.getResult().getUploadSessionUri().toString();
                         // Do whatever you want with fileUri 

                        }
                   }
            }) ;
 filePath.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                            @Override
                            public void onSuccess(Uri uri) {
                                String category = spinner.getSelectedItem().toString();
                                String title = ((EditText) findViewById(R.id.post_title)).getText().toString();
                                String description = ((EditText) findViewById(R.id.post_description)).getText().toString();
                                final Post post = new Post(userId, category, title, description, latitude, longitude, true);
                                post.setAddressList(addressLine);
                                post.setContact(contact);

                                if (addressLine != null) {
                                    post.setPlace(addressLine.split(",")[2]);
                                }
                                post.setId(key);
                                post.setImage(uri.toString());
                                databaseReference.setValue(post).addOnCompleteListener(new OnCompleteListener<Void>() {
                                    @Override
                                    public void onComplete(@NonNull Task<Void> task) {
                                        if (task.isSuccessful()) {

                                            ((EditText) findViewById(R.id.post_title)).setText("");
                                            ((EditText) findViewById(R.id.post_description)).setText("");
                                            postImageButton.setImageURI(null);
                                            progressBarDialog.dismiss();
                                            Toast.makeText(PostActivity.this, "Your request is sucessfully completed", Toast.LENGTH_SHORT).show();
                                        } else if (!task.isSuccessful()) {
                                            progressBarDialog.dismiss();
                                            Toast.makeText(PostActivity.this, "Your request is not completed", Toast.LENGTH_SHORT).show();
                                        }

                                    }
                                });
                            }

                        });
                    }

change the URI to URL

val urlTask = uploadTask.continueWith { task ->
            if (!task.isSuccessful) {
                task.exception?.let {
                    throw it
                }
            }


            spcaeRef.downloadUrl
        }.addOnCompleteListener { task ->
            if (task.isSuccessful) {

                val downloadUri = task.result

                //URL
                val url = downloadUri!!.result

            } else {
                //handle failure here
            }
        }

In Ionic 5 + capacitor, this is how I ended up being able to both monitor upload and get the finished file name.

The code was collected from google's own documentation + some google search ( https://ionicthemes.com/tutorials/about/ionic-firebase-image-upload among others).

It is using canvas (as far as I understand) to generate a base64 string from an image. That worked, where ionic's File and Base64 didn't.

On the page, I have an <ion-progressbar> showing the percentage (this.downloadProgress) if it is > 0. I also have an <ion-img> with src=this.imageUrl that shows the picture when it's uploaded.

I couldn't get any of the techniques in above answers to work, wouldn't even compile. But I don't know enough to know why anyway.

Another caveat was that some of the example code used function() instead of arrow syntax

encodeImageUri(imageURI, function(image64) {

which needs rewriting to arrow syntax to bind/pass in "this" to the function called, like here:

encodeImageUri(imageURI, image64 => {

    uploadImage(imageURI) {
    console.log(`try upload ${imageURI}`)
      let storageRef = firebase.storage().ref();
      let imageRef = storageRef.child('image').child('imageName');
      this.encodeImageUri(imageURI, image64 => {

        // create upload task
        const uplTask = imageRef.putString(image64, 'data_url');

        uplTask.on('state_changed',
          snapshot => {
            var progress = (snapshot.bytesTransferred / snapshot.totalBytes);
            console.log('Upload is ' + progress * 100 + '% done'); // might display this somewhere
            this.downloadProgress = progress; // update progress bar
          },
          error => {
            console.log('upload error');
          },
          () => {
            uplTask.snapshot.ref.getDownloadURL()
              .then(downloadURL => {
                console.log('File available at', downloadURL);
                this.imageUrl = downloadURL;
                this.downloadProgress = -1; // negative values hide the progress bar
              });        
          }
        );
      });
  }

  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;
  };

Of course this is kind of boring since it's always overwriting the same Firebase Storage file:) But that's fixable.

Not sure if this is what you're looking for as I am using Kotlin. This is what worked for me in my current project. I hope it will help someone else in the future.

Firstly I'm getting the image from the camera or from the gallery. I'm using a current timestamp to make file names unique.

fun uploadFileFromMemory() {

        showLoading()

        val currentTimestamp = System.currentTimeMillis()

        val storage = Firebase.storage("Your storage url")

        // Create a storage reference from our app
        val storageRef = storage.reference

        // Create a reference to "mountains.jpg"
        val mountainsRef = storageRef.child("images/picture$currentTimestamp.jpg")

        // Get the data from an adminImageView as bytes
        adminImageView.isDrawingCacheEnabled = true
        adminImageView.buildDrawingCache()
        val bitmap = (adminImageView.drawable as BitmapDrawable).bitmap
        val baos = ByteArrayOutputStream()
        bitmap.compress(Bitmap.CompressFormat.JPEG, 100, baos)
        val data = baos.toByteArray()

        var uploadTask = mountainsRef.putBytes(data)

        val urlTask = uploadTask.continueWithTask { task ->
            if (!task.isSuccessful) {
                task.exception?.let {
                    throw it
                }
            }
            mountainsRef.downloadUrl
        }.addOnCompleteListener { task ->
            if (task.isSuccessful) {
                val downloadUri = task.result

                updateServicePicture(downloadUri.toString())

            } else {
                hideLoading()

                showToast("Something went wrong")
            }
        }

After that, I am getting the URL of the newly updated file to update the picture URL property in my firestore database using this function.

fun updateServicePicture(url: String) {

        val db = FirebaseFirestore.getInstance()

        val id = arguments?.getString("id")

        if (id !== null) {

            val ref = db.collection("services").document(id)

// Set the "isCapital" field of the city 'DC'
            ref
                .update("picture", url)
                .addOnSuccessListener { Log.d(TAG, "DocumentSnapshot successfully updated!")

                    hideLoading()

                    showToast("Picture has been successfully updated")
                }
                .addOnFailureListener { e -> Log.w(TAG, "Error updating document", e)

                    hideLoading()

                    showToast("Something went wrong")
                }

        }
    }

hideLoading(), showloading() and showToast() are my functions for progressbar and toast. I hope this helps someone out. With the documentation and some testing, I eventually got it to work. Happy coding everyone.

  Future<List<String>> uploadImages(List<String> filepaths) async {
    List<String> uploadUrls = [];

    await Future.wait(filepaths.map((String filepath) async {
      FirebaseStorage storage = FirebaseStorage(storageBucket: 'gs://your-bucket-name.appspot.com');
      StorageUploadTask uploadTask = storage.ref().child("images/${basename(filepath)}").putFile(File(filepath));
      StorageTaskSnapshot storageTaskSnapshot;

      StorageTaskSnapshot snapshot = await uploadTask.onComplete;
      if (snapshot.error == null) {
        storageTaskSnapshot = snapshot;
        final String downloadUrl = await storageTaskSnapshot.ref.getDownloadURL();
        uploadUrls.add(downloadUrl);

        print('Upload success');
      } else {
        print('Error from image repo ${snapshot.error.toString()}');
        throw ('This file is not an image');
      }
    }), eagerError: true, cleanUp: (_) {
      print('eager cleaned up');
    });

    return uploadUrls;
  }
}

Did you try taskSnapshot.getDownloadUrl() ? if that also doesn't work you can get the image location in success listener by mstorageRef.child("folder").child(filename).toString()

Try This:

final Uri uri = data.getData();

StorageReference filepath = mStorageRef.child("folder").child(filename);
filepath.putFile(uri).addOnSuccessListener(new 

OnSuccessListener<UploadTask.TaskSnapshot>() {

        @Override
        public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {

            Uri downloadUri = taskSnapshot.getDownloadUrl();
            //Getting url where image is stored
            //downloadUri will store image URI
        }
    });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM