I've got this method:
func fetchImageWithKey(key: String, completion: UIImage -> ()) {
imagesEndPoint.childByAppendingPath(key).observeSingleEventOfType(.Value, withBlock: { snapshot in
guard let imageString = snapshot.value["imageString"] as? String else { return }
guard let imageData = NSData(base64EncodedString: imageString, options: .IgnoreUnknownCharacters), image = UIImage(data: imageData) else { fatalError() }
completion(image)
})
}
Which is called each time a cell is dequeued in cellForRowAtIndexPath. For some reason, whilst scrolling through the tableView, this line guard let imageString = snapshot.value["imageString"] as? String else { return } will hit the else block.
I made sure that the ref does indeed have the key "imageString" and a value of type String in the end. I'm thinking it has something to do with the tableView cell dequeueing, but I'm not sure how I might approach this problem.
Any advice?
Are you sure: snapshot.value is dictionary.
You should check :
if let dic = snapshot.value as? NSDictionary{
guard let imageString = dic["imageString"] as? String else { return }
guard let imageData = NSData(base64EncodedString: imageString, options: .IgnoreUnknownCharacters), image = UIImage(data: imageData) else { fatalError() }
completion(image)
}else{
//
}
Related
When I what to remove all the actuall data from the collection view and add new data, pass the error Unexpectedly found nil while unwrapping an Optional value when trigger again reloadData(). Here's the code where pops up.
func getAllProducts(){
print("All products before getting again from the func: \(productsAll.count)")
productsAll.removeAll()
refProducts.observeSingleEvent(of: .value) { (snapshot) in
guard let productsDic = snapshot.value as? [String:AnyObject] else {return}
for(_, productSelected) in productsDic{
guard let name = productSelected["name"] as? String else {return}
guard let imageURLString = productSelected["image"] as? String else {return}
guard let price = productSelected["price"] as? String else {return}
guard let description = productSelected["description"] as? String else {return}
guard let imgURL = URL(string: imageURLString) else {return}
guard let data = try? Data(contentsOf: imgURL) else {return}
guard let img = UIImage(data: data) else {return}
let productData = Product(productImage: img, productName: name, productPrice: price, productDescription: description, productRecommended: false)
self.productsAll.append(productData)
print("We have \(self.productsAll.count) products in All products")
}
DispatchQueue.main.async {
self.collectionView.reloadData()
}
}
}
The following code fetches images from firebase, but incorrectly duplicates two images. I think that is due to the placement of the self.tableView.reloadData() None of the placements I've tried work. Can anyone give me suggestions?
func fetchAllUsersImages() {
print("inside func")
self.ref.child("Posts").child(self.userID).child(self.postNum).observe(.childAdded, with: { snapshot in
if let snapShotValue = snapshot.value as? [String: String] {
for (_, value) in snapShotValue {
if let imageURL = URL(string: value) {
print(imageURL, "image url here")
do {
let imageAsData = try Data(contentsOf: imageURL)
let image = UIImage(data: imageAsData)
let ImageObject = Image()
ImageObject.image = image
self.arrayOfImgObj.append(ImageObject)
} catch {
print("imageURL was not able to be converted into data")
}
}
}
}
})
}
Make sure you clear the array when start calling the function because you are appending data to the array. Secondly, reload table after finished the for loop.
func fetchAllUsersImages() {
self.arrayOfImgObj.removeAll() // clean the array
self.ref.child("Posts").child(self.userID).child(self.postNum).observe(.childAdded, with: { snapshot in
if let snapShotValue = snapshot.value as? [String: String] {
for (_, value) in snapShotValue {
}
tableView.reloadData() // reload view
}
})
}
Could someone please suggest or guide, how I can I return the ProfileImage obtained at Location 1 in the below code and return it at Location 2. Would greatly appreciate your help. I've gone though other SO questions but none of them helped me.
static var profileImage : UIImage{
get{
let defaults = UserDefaults.standard
guard let imageData = defaults.object(forKey: "profileImage") as? NSData else{
downloadAndSetProfileImage(completionHandler: { (profileImage) in
// LOCATION 1:
// PLEASE ADVISE HOW I CAN RETURN THE OBTAINED PROFILE IMAGE BELOW at LOCATION 2
})
}
// LOCATION 2:
// I would like to return the profileImage Here i.e. return profileImage
}
set (image){
let defaults = UserDefaults.standard
let imageData : NSData = UIImagePNGRepresentation(image)! as NSData
defaults.set(imageData, forKey: "profileImage")
}
}
You should not put asynchronous tasks into your getter. Instead you can use your optional profileImage computed property only for getting your image from the user defaults and make another async function to get the user profile which will return an image from the defaults if it's not nil, otherwise it will it attempt to download one. Like this:
static var profileImage : UIImage? {
get {
let defaults = UserDefaults.standard
guard let imageData = defaults.object(forKey: "profileImage") as? NSData else {
return nil
}
return UIImage(data: Data(referencing: imageData))
}
set {
let defaults = UserDefaults.standard
guard newValue != nil else {
defaults.removeObject(forKey: "profileImage")
return
}
let imageData = NSData(data: UIImagePNGRepresentation(newValue!)!)
defaults.set(imageData, forKey: "profileImage")
}
}
// Async function to retrieve profile image
func getProfileImage(completion: (_ image: UIImage?) -> ()) {
guard ProfileAPI.profileImage == nil else {
completion(ViewController.profileImage!)
return
}
// Your image dowload funciton
SomeImageDownloader.downloadImage("imagePath") { downloadedImage in
completion(downloadedImage) // assuming downloadedImage can be nil
}
}
To get your profile image you call:
getProfileImage { (image) in
if let profileIage = image {
// do something with it
}
}
In the example getProfileImage combines the profileImage property with downloadImage. If getProfileImage has a value it will pass it immediately with the completion closure, otherwise it will call downloadImage and will pass the result when the task is over. Bottom line, you have a situation where an asynchronous task is needed, so in one way or another you need some kind of completion handler such as one in my example.
static var profileImage : UIImage{
get{
let defaults = UserDefaults.standard
guard let imageData = defaults.object(forKey: "profileImage") as? NSData else{
downloadAndSetProfileImage(completionHandler: { (profileImage) in
// LOCATION 1:
return profileImage
})
}
// LOCATION 2:
return UIImage(data: (imageData as! NSData) as Data)
}
set (image){
let defaults = UserDefaults.standard
let imageData : NSData = UIImagePNGRepresentation(image)! as NSData
defaults.set(imageData, forKey: "profileImage")
}
}
You can use return operator
get{
let defaults = UserDefaults.standard
guard let imageData = defaults.object(forKey: "profileImage") as? NSData else{
downloadAndSetProfileImage(completionHandler: { (profileImage) in
return profileImage
})
}
return UIImage(data: (imageData as! NSData) as Data)
}
If you receive value type of Data in your completionHandler, you should use method UIImage(data: profileImage)
I have looked at a lot of questions and I do not believe this is a result of reusing a cell as the new cells image is correct, but and existing cells image is incorrect and used to be correct. I'll post the images first so the issue is easier to understand.
I have a collectionView of image cells (similar to Instagrams user page). I'm fetching all of the data from Firebase. I get the first 12 posts on the initial loading of the screen. However, if you scroll down quickly an EXISTING cells image changes to a newly fetched image. I'm not sure why this is happening... Maybe it's a caching issue? The issue only occurs the first time you load the screen. I've tried setting the images to nil like this:
override func prepareForReuse() {
super.prepareForReuse()
self.imageView.image = UIImage()
}
This didn't help the issue though.
Here is my cellForItemAt:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "imageCell", for: indexPath) as! ImageCell
cell.indexPath = indexPath
cell.imageView.downloadImage(from: currentTablePosts[indexPath.row].pathToImage)
cell.layer.borderWidth = 1
cell.layer.borderColor = UIColor.black.cgColor
return cell
}
Image downloading and caching:
let imageCache = NSCache<NSString, UIImage>()
extension UIImageView {
func downloadImage(from imgURL: String!) {
let url = URLRequest(url: URL(string: imgURL)!)
// set initial image to nil so it doesn't use the image from a reused cell
image = nil
// check if the image is already in the cache
if let imageToCache = imageCache.object(forKey: imgURL! as NSString) {
self.image = imageToCache
return
}
// download the image asynchronously
let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
if error != nil {
// user an alert to display the error
if let topController = UIApplication.topViewController() {
Helper.showAlertMessage(vc: topController, title: "Error Downloading Image", message: error as! String)
}
return
}
DispatchQueue.main.async {
// create UIImage
let imageToCache = UIImage(data: data!)
// add image to cache
imageCache.setObject(imageToCache!, forKey: imgURL! as NSString)
self.image = imageToCache
}
}
task.resume()
}
}
Firebase Queries:
static func getInitialTablesPosts(tableNumber: String) {
tableReference.child(tableNumber).queryLimited(toLast: 12).observeSingleEvent(of: .value, with: { snap in
for child in snap.children {
let child = child as? DataSnapshot
if let post = child?.value as? [String: AnyObject] {
let posst = Post()
if let author = post["author"] as? String, let likes = post["likes"] as? Int, let pathToImage = post["pathToImage"] as? String, let postID = post["postID"] as? String, let postDescription = post["postDescription"] as? String, let timestamp = post["timestamp"] as? Double, let category = post["category"] as? String, let table = post["group"] as? String, let userID = post["userID"] as? String, let numberOfComments = post["numberOfComments"] as? Int, let region = post["region"] as? String {
posst.author = author
posst.likes = likes
posst.pathToImage = pathToImage
posst.postID = postID
posst.userID = userID
posst.fancyPostDescription = Helper.createAttributedString(author: author, postText: postDescription)
posst.postDescription = author + ": " + postDescription
posst.timestamp = timestamp
posst.table = table
posst.region = region
posst.category = category
posst.numberOfComments = numberOfComments
posst.userWhoPostedLabel = Helper.createAttributedPostLabel(username: author, table: table, region: region, category: category)
if let people = post["peopleWhoLike"] as? [String: AnyObject] {
for(_, person) in people {
posst.peopleWhoLike.append(person as! String)
}
}
currentTablePosts.insert(posst, at: 0)
NotificationCenter.default.post(name: NSNotification.Name(rawValue: "reloadTableCollectionView"), object: nil)
} // end of if let
}
}
})
tableReference.removeAllObservers()
}
static func getMoreTablePosts(tableNumber: String, lastVisibleKey: String) {
print("FIRED...")
let currentNumberOfPosts = currentTablePosts.count
print("Number of posts before fetiching ", currentNumberOfPosts)
print("Oldest post key ", oldestTableKeys[tableNumber] ?? "not set yet", "***********")
tableReference.child(tableNumber).queryOrderedByKey().queryEnding(atValue: lastVisibleKey).queryLimited(toLast: 12).observeSingleEvent(of: .value, with: { snap in
for child in snap.children {
let child = child as? DataSnapshot
if let post = child?.value as? [String: AnyObject] {
if let id = post["postID"] as? String {
if id == lastVisibleKey {
return
}
}
let posst = Post()
if let author = post["author"] as? String, let likes = post["likes"] as? Int, let pathToImage = post["pathToImage"] as? String, let postID = post["postID"] as? String, let postDescription = post["postDescription"] as? String, let timestamp = post["timestamp"] as? Double, let category = post["category"] as? String, let table = post["group"] as? String, let userID = post["userID"] as? String, let numberOfComments = post["numberOfComments"] as? Int, let region = post["region"] as? String {
posst.author = author
posst.likes = likes
posst.pathToImage = pathToImage
posst.postID = postID
posst.userID = userID
posst.fancyPostDescription = Helper.createAttributedString(author: author, postText: postDescription)
posst.postDescription = author + ": " + postDescription
posst.timestamp = timestamp
posst.table = table
posst.region = region
posst.category = category
posst.numberOfComments = numberOfComments
posst.userWhoPostedLabel = Helper.createAttributedPostLabel(username: author, table: table, region: region, category: category)
if let people = post["peopleWhoLike"] as? [String: AnyObject] {
for(_, person) in people {
posst.peopleWhoLike.append(person as! String)
}
}
currentTablePosts.insert(posst, at: currentNumberOfPosts)
NotificationCenter.default.post(name: NSNotification.Name(rawValue: "reloadTableCollectionView"), object: nil)
if let oldestTableKey = oldestTableKeys[tableNumber] {
if postID == oldestTableKey {
print("returning")
print("number of posts on return \(currentTablePosts.count)")
return
}
}
} // end if let
}
}
})
tableReference.removeAllObservers()
}
* UPDATE *
The image caching used here still had some issues in my experience. I have since moved on to using Kingfisher which is extremely easy to setup and use.
* OLD SOLUTION *
Found a solution based on the answer suggested in the comments.
I modified the extension I am using to cache my images. Although in the future I think I will subclass UIImageView. Here is the modified version of my code.
import UIKit
let userImageCache = NSCache<NSString, UIImage>()
let imageCache = NSCache<AnyObject, AnyObject>()
var imageURLString: String?
extension UIImageView {
public func imageFromServerURL(urlString: String, collectionView: UICollectionView, indexpath : IndexPath) {
imageURLString = urlString
if let url = URL(string: urlString) {
image = nil
if let imageFromCache = imageCache.object(forKey: urlString as AnyObject) as? UIImage {
self.image = imageFromCache
return
}
URLSession.shared.dataTask(with: url, completionHandler: { (data, response, error) in
if error != nil{
if let topController = UIApplication.topViewController() {
Helper.showAlertMessage(vc: topController, title: "Error Downloading Image", message: error as! String)
}
return
}
DispatchQueue.main.async(execute: {
if let imgaeToCache = UIImage(data: data!){
if imageURLString == urlString {
self.image = imgaeToCache
}
imageCache.setObject(imgaeToCache, forKey: urlString as AnyObject)// calls when scrolling
collectionView.reloadItems(at: [indexpath])
}
})
}) .resume()
}
}
func downloadImage(from imgURL: String!) {
let url = URLRequest(url: URL(string: imgURL)!)
// set initial image to nil so it doesn't use the image from a reused cell
image = nil
// check if the image is already in the cache
if let imageToCache = imageCache.object(forKey: imgURL! as AnyObject) as? UIImage {
self.image = imageToCache
return
}
// download the image asynchronously
let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
if error != nil {
// user an alert to display the error
if let topController = UIApplication.topViewController() {
Helper.showAlertMessage(vc: topController, title: "Error Downloading Image", message: error as! String)
}
return
}
DispatchQueue.main.async {
let imageToCache = UIImage(data: data!)
imageCache.setObject(imageToCache!, forKey: imgURL! as AnyObject)
self.image = imageToCache
}
}
task.resume()
}
func downloadUserImage(from imgURL: String!) {
let url = URLRequest(url: URL(string: imgURL)!)
// set initial image to nil so it doesn't use the image from a reused cell
image = nil
// check if the image is already in the cache
if let imageToCache = userImageCache.object(forKey: imgURL! as NSString) {
self.image = imageToCache
return
}
// download the image asynchronously
let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
if error != nil {
// user an alert to display the error
if let topController = UIApplication.topViewController() {
Helper.showAlertMessage(vc: topController, title: "Error Downloading Image", message: error as! String)
}
return
}
DispatchQueue.main.async {
// create UIImage
let imageToCache = UIImage(data: data!)
// add image to cache
userImageCache.setObject(imageToCache!, forKey: imgURL! as NSString)
self.image = imageToCache
}
}
task.resume()
}
}
I created the first method to cache the images for the collectionView and the other methods are still used for tableViews. The cache was also changed from let imageCache = NSCache<NSString, UIImage>() to let imageCache = NSCache<AnyObject, AnyObject>()
I followed the Firebase tutorial by Ray Wenderlich (Link) and adopted his way of initializing the object (in my case of type "Location") with the snapshot from the observe-method:
class Location:
init(snapshot: FIRDataSnapshot) {
identifier = snapshot.key
let snapshotValue = snapshot.value as! [String : AnyObject]
type = snapshotValue["type"] as! String
name = snapshotValue["name"] as! String
address = snapshotValue["address"] as! String
latitude = Double(snapshotValue["latitude"] as! String)!
longitude = Double(snapshotValue["longitude"] as! String)!
avatarPath = snapshotValue["avatarPath"] as! String
ref = snapshot.ref
}
LocationsViewController:
databaseHandle = locationsRef?.queryOrdered(byChild: "name").observe(.value, with: { (snapshot) in
var newLocations:[Location] = []
for loc in snapshot.children {
let location = Location(snapshot: loc as! FIRDataSnapshot)
newLocations.append(location)
}
self.locations = newLocations
self.tableView.reloadData()
})
This really works like a charm, but now I'm trying to load the image stored under the storage reference "avatarPath".
My attempt worked but the images take a ling time to load. Is there a better way/place to load these images?
My attempt 1:
databaseHandle = locationsRef?.queryOrdered(byChild: "name").observe(.value, with: { (snapshot) in
var newLocations:[Location] = []
for loc in snapshot.children {
let location = Location(snapshot: loc as! FIRDataSnapshot)
newLocations.append(location)
}
self.locations = newLocations
self.tableView.reloadData()
//Load images
for loc in self.locations {
let imagesStorageRef = FIRStorage.storage().reference().child(loc.avatarPath)
imagesStorageRef.data(withMaxSize: 1*1024*1024, completion: { (data, error) in
if let error = error {
print(error.localizedDescription)
} else {
loc.avatarImage = UIImage(data: data!)!
self.tableView.reloadData()
}
})
}
})
My 2nd Attempt (inside Location class):
init(snapshot: FIRDataSnapshot) {
identifier = snapshot.key
let snapshotValue = snapshot.value as! [String : AnyObject]
type = snapshotValue["type"] as! String
name = snapshotValue["name"] as! String
address = snapshotValue["address"] as! String
latitude = Double(snapshotValue["latitude"] as! String)!
longitude = Double(snapshotValue["longitude"] as! String)!
avatarPath = snapshotValue["avatarPath"] as! String
ref = snapshot.ref
super.init()
downloadImage()
}
func downloadImage() {
let imagesStorageRef = FIRStorage.storage().reference().child(self.avatarPath)
imagesStorageRef.data(withMaxSize: 1*1024*1024, completion: { (data, error) in
if let error = error {
print(error.localizedDescription)
} else {
self.avatarImage = UIImage(data: data!)!
}
})
}
Thank you in advance!
Nico
The best way you can accomplish that is to load asynchronous inside the loading of the cell function. I mean:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{
DispatchQueue.main.async {
let imagesStorageRef = FIRStorage.storage().reference().child(self.locations[indexPath.row].avatarPath)
imagesStorageRef.data(withMaxSize: 1*1024*1024, completion: { (data, error) in
if let error = error {
print(error.localizedDescription)
} else {
locations[indexPath.row].avatarImage = UIImage(data: data!)!
tableView.reloadRows(at indexPaths: [indexPath], with animation: .none)
}
})
}
}
In first attempt try changing your code as:
DispatchQueue.main.async {
for loc in self.locations {
let imagesStorageRef = FIRStorage.storage().reference().child(loc.avatarPath)
imagesStorageRef.data(withMaxSize: 1*1024*1024, completion: { (data, error) in
if let error = error {
print(error.localizedDescription)
} else {
loc.avatarImage = UIImage(data: data!)!
self.tableView.reloadData()
}
})
}
}