Firebase storage not displaying image - ios

Before writing question I would say that I'm new in iOS development and in firebase too :) That's why I apologize in advance for a silly question :)
When I load profile.png image from firebase storage programmatically it's loaded correctly without any problems.
static func getUserImage(_ uid: String, completion: #escaping (UIImage?, NSError?) -> Void) {
// Create a reference to the file you want to download.
let storage = FIRStorage.storage()
let userUID: String = String(describing: uid)
let storageRef = storage.reference(forURL: "...some address...")
let downloadRef = storageRef.child("\(userUID)/profilePhoto.png")
// Download in memory with a maximum allowed size of 10MB (10 * 1024 * 1024 bytes).
downloadRef.data(withMaxSize: 10 * 1024 * 1024) {
data, error in
guard let data = data, error == nil else {
NSLog("Retrieve image failed:\n\(error?.localizedDescription)")
completion(nil, error as! NSError)
return
}
guard let image = UIImage(data: data) else {
NSLog("Image decoding failed:\n\(data)")
completion(nil, nil)
return
}
assert(error == nil)
completion(image, nil)
}
}
But when I go to firebase storage in browser and try to search it by uid manually from list I can't find it - it doesn't exist. Could you explain me how it's possible? It problem exists only for several images in firebase storage.
Thank you in advance!

Folder name should start with capital letter.

Related

Display Image downloaded from downloadURL generated by Firebase

I need to display the images that have been stored on the storage on Firebase. Right now, I only tracked the images using the link generated by function downloadURL:
func UploadImage(imageData: Data, path: String, completion: #escaping (String) -> ()){
let storage = Storage.storage().reference()
let uid = Auth.auth().currentUser?.uid
storage.child(path).child(uid ?? "").putData(imageData, metadata: nil) { (_, err) in
if err != nil{
completion("")
return
}
// Downloading Url And Sending Back...
storage.child(path).child(uid ?? "").downloadURL { (url, err) in
if err != nil{
completion("")
return
}
completion("\(url!)")
}
}
}
So all I can get is a hyperlink that is like: https://firebasestorage.googleapis.com/v0/b/getting-started-20f2f.appspot.com/o/profile_Photos%2FGQ1KR9H1mLZl2NAw9KQcRe7d72N2?alt=media&token=473ce86c-52ba-42ec-be71-32cc7dc895d7.
I refer to the official documentation, it seems that only when I have the name of the image file can I download it to an ImageView or UIImageView object. However, the link does not make any sense to me, so what can I do?
EDIT
I actually tried a solution provided by the official documentation:
func imageDownloader(_ imageURL: String) {
let store = Database.database().reference()
let uid = Auth.auth().currentUser?.uid
let imageRef = store.child(imageURL)
var myImageView = UIImageView()
imageRef.getData(completion: { (error, data) in
if let error = error {
// Uh-oh, an error occurred!
} else {
// Data for "images/island.jpg" is returned
let image = UIImage(data: data!)
}
})
}
But it suggests that I need to change something because Cannot convert value of type 'DataSnapshot' to expected argument type 'Data'.
If you're storing the image paths in Firestore, actually the exact file name does not matter if there is only one file available under the fork. So you just need to specify the path.
To then download the image from Storage, construct the path and download:
let uid = Auth.auth().currentUser?.uid
Storage.storage().reference().child("the\path\to\your\uid\collection").child(uid).getData(maxSize: 1048576, completion: { (data, error) in
if let data = data,
let img = UIImage(data: data) {
// do something with your image
} else {
if let error = error {
print(error)
}
// handle errors
}
})
You are uploading to Storage.storage(), but then in your imageDownloader, you're attempting to use Database.database(), which has a similar-looking API, but is, in fact, different.
Make sure to use Storage.storage() and that the closure parameters are in the order data, error in.
Finally, right now in your imageDownloader, it doesn't look like you're doing anything yet with var myImageView = UIImageView(), but keep in mind that you won't have access to the UIImage until the async getData completes.
Store your images at Firebase Storage & then retrieve using this code.
Storage.storage().reference.child("ProfilePhotos").child("ImageName").downloadURL {(url, _) in
DispatchQueue.main.async {
guard let url = url else { return }
imageView.setImage(with: url, placeholder: UIImage(named: "dummyImage"))
}
}

How to download and declare a large number of images from Firebase Storage?

I am creating an iOS app (in Xcode with Swift) that displays a large number of trading cards to the user. The card information (name, attack, etc) is stored in the Firebase Database in the form of a JSON file. I would like to store the images for each card in Firebase Storage, but don't know how to retrieve them in a way that would be similar to having a populated Assets.xcassets folder.
If possible I would like to loop through all images in storage and declare each one as a UIImage so that they can later be called by name by my collectionView and be displayed.
Is there a way to declare hundred of variables with a loop, each with a unique variable name? How would I set these variables to the images I saved in storage?
Most of the code I have seen for downloading from storage has looked similar to this:
// Create a reference to the file you want to download
let islandRef = storageRef.child("images/island.jpg")
// Download in memory with a maximum allowed size of 1MB (1 * 1024 * 1024 bytes)
islandRef.dataWithMaxSize(1 * 1024 * 1024) { (data, error) -> Void in
if (error != nil) {
// Uh-oh, an error occurred!
} else {
// Data for "images/island.jpg" is returned
// ... let islandImage: UIImage! = UIImage(data: data!)
}
}
This only downloads one image, naming the variable "islandImage." I need to be able to do this for every item in my firebase database.
if you're fetching large amount of data from firebase, maybe you should consider using pagination to fetch a few images at a time to avoid frozen UI. Below i have a sample function from Brian Voong's Instagram firebase course(https://www.letsbuildthatapp.com/course/Instagram-Firebase).
fileprivate func paginatePosts() {
guard let uid = self.user?.uid else {return}
let ref = Database.database().reference().child("posts").child(uid)
var query = ref.queryOrdered(byChild: "creationDate")
if posts.count > 0 {
let value = posts.last?.creationDate.timeIntervalSince1970
query = query.queryEnding(atValue: value)
}
query.queryLimited(toLast: 4).observeSingleEvent(of: .value, with: { (snapshot) in
print("all snapshots: ", snapshot)
guard var allObjects = snapshot.children.allObjects as? [DataSnapshot] else {return}
allObjects.reverse()
if allObjects.count < 4 {
self.isFinishedPaging = true
}
if self.posts.count > 0 && allObjects.count > 0 {
allObjects.removeFirst()
}
guard let user = self.user else {return}
allObjects.forEach({ (snapshot) in
guard let dictionary = snapshot.value as? [String : Any] else {return}
var post = Post(user: user, dictionary: dictionary)
post.id = snapshot.key
self.posts.append(post)
})
self.posts.forEach({ (post) in
})
self.collectionView?.reloadData()
}) { (err) in
print("Failed to paginate for posts:", err)
}
}

uploading/downloading multiple images the right way?

i'm trying to upload or download images using Nuke(framework for downloading and Caching images) And Firebase to upload images as the backend
for single file it's easy to deal with without any problem
but for multiple ones i don't really know what to do right
i'm having an issues where it don't do it job synchronously
it downloads second image before the first one sometimes
i'll show my way of downloading and uploading multiple images
For download i put the code in for-loop
func downloadImages(completion: (result: [ImageSource]) -> Void){
var images = [ImageSource]()
for i in 0...imageURLs.count-1{
let request = ImageRequest(URL: NSURL(string:imageURLs[i])!)
Nuke.taskWith(request) { response in
if response.isSuccess{
let image = ImageSource(image: response.image!)
images.append(image)
if i == self.imageURLs.count-1 {
completion(result: images)
}
}
}.resume()
}
}
And for uploading where the user chooses the images
form image picker and return it as NSData array
And then perform this code
func uploadImages(completion: (result: [String]) -> Void){
let storageRef = storage.referenceForURL("gs://project-xxxxxxxxx.appspot.com/Uploads/\(ref.childByAutoId())")
var imageUrl = [String]()
var imgNum = 0
for i in 0...imageData.count-1 {
let imagesRef = storageRef.child("\(FIRAuth.auth()?.currentUser?.uid) \(imgNum)")
imgNum+=1
let uploadTask = imagesRef.putData(imageData[i], metadata: nil) { metadata, error in
if (error != nil) {
print("error")
imageUrl = [String]()
completion(result: imageUrl)
} else {
print("uploading")
// Metadata contains file metadata such as size, content-type, and download URL.
let downloadURL = metadata!.downloadURL()?.absoluteString
print(downloadURL)
imageUrl.append(downloadURL!)
if i == imageUrl.count-1{ //end of the loop
print("completionUpload")
completion(result: imageUrl)
}
}
}}
this is good way to do this task ?
what should i do to make each image downloads in order ?
please give me anything that may help example code , link etc ..
Thanks in advance
We highly recommend using Firebase Storage and the Firebase Realtime Database together to accomplish lists of downloads:
Shared:
// Firebase services
var database: FIRDatabase!
var storage: FIRStorage!
...
// Initialize Database, Auth, Storage
database = FIRDatabase.database()
storage = FIRStorage.storage()
Upload:
let fileData = NSData() // get data...
let storageRef = storage.reference().child("myFiles/myFile")
storageRef.putData(fileData).observeStatus(.Success) { (snapshot) in
// When the image has successfully uploaded, we get it's download URL
let downloadURL = snapshot.metadata?.downloadURL()?.absoluteString
// Write the download URL to the Realtime Database
let dbRef = database.reference().child("myFiles/myFile")
dbRef.setValue(downloadURL)
}
Download:
let dbRef = database.reference().child("myFiles")
dbRef.observeEventType(.ChildAdded, withBlock: { (snapshot) in
// Get download URL from snapshot
let downloadURL = snapshot.value() as! String
// Now use Nuke (or another third party lib)
let request = ImageRequest(URL: NSURL(string:downloadURL)!)
Nuke.taskWith(request) { response in
// Do something with response
}
// Alternatively, you can use the Storage built-ins:
// Create a storage reference from the URL
let storageRef = storage.referenceFromURL(downloadURL)
// Download the data, assuming a max size of 1MB (you can change this as necessary)
storageRef.dataWithMaxSize(1 * 1024 * 1024) { (data, error) -> Void in
// Do something with data...
})
})
For more information, see Zero to App: Develop with Firebase, and it's associated source code, for a practical example of how to do this.

Uploading Multiple Images simultaneously with Google Firebase

I'm using Google Firebase in a Swift iOS project. I have a part of my app where the user selects more than 1 photo from their device to upload. I'm trying to find the best practice for uploading all the photos they selected at once to Firebase Storage. I know how to upload one photo.
I looked through the Docs and didn't see any methods about uploading multiple NSData objects, so would I just run a for loop and upload each image individually?
Thanks! All feedback is appreciated.
Swift 3
This is how I am uploading multiple images to Firebase. I am making a count of successful uploads, if its equal to the number of images supplied, thats when I am calling a completion handler.
Not sure if this is the best practice, but it works!!
import Foundation
import Firebase
import FirebaseDatabase
import FirebaseStorage
class UploadImages: NSObject{
static func saveImages(imagesArray : [UiImage]){
Auth.auth().signInAnonymously() { (user, error) in
//let isAnonymous = user!.isAnonymous // true
//let uid = user!.uid
if error != nil{
print(error)
return
}
guard let uid = user?.uid else{
return
}
uploadImages(userId: uid,imagesArray : imagesArray){ (uploadedImageUrlsArray) in
print("uploadedImageUrlsArray: \(uploadedImageUrlsArray)")
}
}
}
static func uploadImages(userId: String, imagesArray : [UIImage], completionHandler: #escaping ([String]) -> ()){
var storage = Storage.storage()
var uploadedImageUrlsArray = [String]()
var uploadCount = 0
let imagesCount = imagesArray.count
for image in imagesArray{
let imageName = NSUUID().uuidString // Unique string to reference image
//Create storage reference for image
let storageRef = storage.reference().child("\(userId)").child("\(imageName).png")
guard let myImage = image else{
return
}
guard let uplodaData = UIImagePNGRepresentation(myImage) else{
return
}
// Upload image to firebase
let uploadTask = storageRef.putData(uplodaData, metadata: nil, completion: { (metadata, error) in
if error != nil{
print(error)
return
}
if let imageUrl = metadata?.downloadURL()?.absoluteString{
print(imageUrl)
uploadedImageUrlsArray.append(imageUrl)
uploadCount += 1
print("Number of images successfully uploaded: \(uploadCount)")
if uploadCount == imagesCount{
NSLog("All Images are uploaded successfully, uploadedImageUrlsArray: \(uploadedImageUrlsArray)")
completionHandler(uploadedImageUrlsArray)
}
}
})
observeUploadTaskFailureCases(uploadTask : uploadTask)
}
}
//Func to observe error cases while uploading image files, Ref: https://firebase.google.com/docs/storage/ios/upload-files
static func observeUploadTaskFailureCases(uploadTask : StorageUploadTask){
uploadTask.observe(.failure) { snapshot in
if let error = snapshot.error as? NSError {
switch (StorageErrorCode(rawValue: error.code)!) {
case .objectNotFound:
NSLog("File doesn't exist")
break
case .unauthorized:
NSLog("User doesn't have permission to access file")
break
case .cancelled:
NSLog("User canceled the upload")
break
case .unknown:
NSLog("Unknown error occurred, inspect the server response")
break
default:
NSLog("A separate error occurred, This is a good place to retry the upload.")
break
}
}
}
}
}
Usage
let arrayOfImages : [UIImage] = [Image1, Image2, Image3]
UploadImages.saveImages(imagesArray: arrayOfImages)
Answered by #FrankVanPuffellen in comments...
"You'd indeed just loop and upload them individually. Your iOS user might also appreciate if you upload them one at a time, so that they can abort the upload midways through without losing progress on all images." – Frank van Puffelen

How to download and view images from the new Firebase Storage?

I am able to upload images to Firebase Storage but I am having trouble downloading them. This is my code to download images:
let storage = FIRStorage.storage()
let localURL : NSURL! = NSURL(string: "file:///Documents/co.png")
// i also tried let localURL : NSURL! = NSURL.fileURLWithPath("file:///Documents/co.png")
func download() {
let storageRef = storage.referenceForURL("gs://project-5547819591027666607.appspot.com")
let imageRef = storageRef.child("co.png")
let downloadTask = imageRef.writeToFile(localURL) { (URL, error) -> Void in
if (error != nil) {
print(error?.localizedDescription)
}
else {
self.imageView.image = UIImage(data: data!)
}
}
}
I am receiving - Optional("An unknown error occurred, please check the server response.")
Also once I get them downloaded How would I view that image?
For trying to see if the image was downloaded I created a UIImageView and set an outlet for it in storyboard called "imageView" then set the downloaded image to the UIImageView.
self.imageView.image = UIImage(data: data!)
Try
first getting reference to the image you want to download using
let reference = FIRStorage.storage().reference("uploads/sample.jpg")
If you know the size of image is low - like 1-2 mb max . download the image in memory
reference.dataWithMaxSize(1 * 1024 * 1024) { (data, error) -> Void in
if (error != nil) {
print(error)
} else {
let myImage: UIImage! = UIImage(data: data!)
}
}
This will be the quickest and easy way to download directly from Firebase Storage.
However there are cases when you want the progress blocks and certain other things like caching. In such cases you could use any third party like Alamofire to download the image from the url you get from Firebase Storage.
To get the url do something like this
reference.downloadURLWithCompletion { (URL, error) -> Void in
if (error != nil) {
// Handle any errors
} else {
print(URL)
// download image using NSURLSession or Alamofire
}
}

Resources