Firebase Storage async image download random order - ios

Question

I'm trying to download images from firebase storage to display in my collectionview cells, but the images keep appearing in random order in the cells. The cells each have a label that is retrieved from firebase storage (item1, item2 etc) which displays nicely in the correct cell every time. The images stored in firebase storage each have their storage url as a child to their respective item name in the firebase database.
I'm sucesfully able to retrieve each image url, and download all the images and display them in the cells correctly, it's just that they keep appearing in randomized order every time I open the app, so the image does not correspond with the item name label.
I realize i need to asyncronously download the images, so each image finishes loading in the correct cell before continuing to the next, but I'm having trouble doing so. Heres my code so far:
func downloadImg(completion: #escaping (UIImage?) -> ()) {
let ref = Database.database().reference().child("somePath")
ref.observeSingleEvent(of: .value) { (snapshot) in
for item in snapshot.children {
let snap = item as! DataSnapshot
let imageSnap = snap.childSnapshot(forPath: "img/storageUrl")
if let url = imageSnap.value as? String {
let someRef = self.storageRef.reference(forURL: url)
someRef.getData(maxSize: 10 * 10024 * 10024) { data, error in
if let error = error {
print(error)
} else {
let image = UIImage(data: data!)
DispatchQueue.main.async {
completion(image)
}
}
}
}
}
}
}
Then I call my function in the viewdidload:
downloadImg { (completion) in
self.itemPicArray.append(completion!)
self.collectionView?.reloadData()
}
Finally i set my cell imageview to itemPicArray[indexPath.row]
Like I said, this works perfectly except the fact that the images keep showing up randomly. Help very much appreciated!

Answer 1

Your problem is that everytime an image comes in, you reload the entire collection view. Depending on the sizes of the images and the state of the network, the images will come in in a different order almost every time.
Consider downloading all of the images first and then reloading the collection view once. If there are a lot of images, consider paginating your results. You can enumerate the loop and sort the data source array by this original order. I've added a custom data object to help with that.
class CustomObject {
var image: UIImage?
let n: Int
init(image: UIImage?, n: Int) {
self.image = image
self.n = n
}
}
let dispatch = DispatchGroup()
for (n, item) in snapshot.children.enumerated() {
let object = CustomObject(image: nil, n: n) // init custom object with n (image is still nil)
dispatch.enter() // enter dispatch
someRef.getData(maxSize: 10 * 10024 * 10024) { data, error in // download image
if let error = error {
print(error)
} else {
let image = UIImage(data: data!)
object.image = image // inject custom object with image
itemPicArray.append(object) // append to array
}
dispatch.leave() // leave dispatch
}
}
dispatch.notify(queue: .global()) { // dispatch completion
itemPicArray.sort { $0.n < $1.n } // sort by n (original download order)
collectionView.reloadData() // reload collection view
}

Answer 2

Using a model could be a good idea.
struct Image {
var imageName: String
var image: UIImage
}
This way, no matter the order, the item name (image name) and the image will be paired.
Perhaps a better solution now is to configure method downloadImg so that it takes the imageName as a parameter. Then you can call the correct node to get the corresponding storageURL.
func downloadImg(imageName: String, completion: #escaping (Image?) -> ()) {
// Use the parameter to create your database reference
let ref = Database.database().reference().child(imageName)
ref.observeSingleEvent(of: .value) { (snapshot) in
for item in snapshot.children {
let snap = item as! DataSnapshot
let imageSnap = snap.childSnapshot(forPath: "img/storageUrl")
if let url = imageSnap.value as? String {
let someRef = self.storageRef.reference(forURL: url)
someRef.getData(maxSize: 10 * 10024 * 10024) { data, error in
if let error = error {
print(error)
return
}
if let image = UIImage(data: data) {
// Create a variable of type Image (your custom model)
let imageWithName = Image(imageName: imageName, image: image)
completion(imageWithName)
}
}
}
}
}
}
Calling and handling could be done like so:
// Create a variable to hold your item name/image-pairs
var imagesWithNames = [Image]()
let dispatchGroup = DispatchGroup()
// Iterate over your array of item names
for item in itemArray {
dispatchGroup.enter()
downloadImg(item) { (imageWithName) in
self.imagesWithNames.append(imageWithName)
dispatchGroup.leave()
}
}
dispatchGroup.notify(queue: .main) { {
self.collectionView?.reloadData()
}
And to populate the collectionView you can go:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! YourCustomCell
// Get the pair at the given index
let imageWithName = self.imagesWithNames[indexPath.row]
DispatchQueue.main.async {
// Set image and item label (example below)
self.yourImageView.image = imageWithName.image
self.yourItemLabel.text = imageWithName.imageName
}
return cell
}

Answer 3

If anyone is having issues with this in the future, use -bsod answer and create a custom object. Also create a variable var counter: Int = 0. Here's how my code looks like Swift 5.X and it works perfectly.
class CustomObject {
var image: UIImage?
let n: Int
init(image: UIImage?, n: Int) {
self.image = image
self.n = n
}
}
func reloadStuff() {
dispatch.notify(queue: .main) {
self.imageArrayCells.sort { $0.n < $1.n }
self.contentViewProfile.collectionView.refreshControl?.endRefreshing()
self.contentViewProfile.collectionView.reloadData()
}
}
for i in 0 ..< self.imageArrayInfo.count {
let object = CustomObject(image: nil, n: i)
let urlString = self.imageArrayInfo[i]
print(object.n)
let url = URL(string: urlString)
self.dispatch.enter()
let task = URLSession.shared.dataTask(with: url!) { (data, response, error) in
self.dispatch.enter()
guard let data = data, error == nil else {
return
}
guard let image = UIImage(data: data) else {
return
}
object.image = image
self.imageArrayCells.append(object)
self.dispatch.leave()
self.counter += 1
if self.counter == self.imageArrayInfo.count {
for i in 0 ..< self.imageArrayInfo.count {
self.dispatch.leave()
}
self.counter = 0
}
}
task.resume()
}
self.reloadStuff()
Here's what I'm calling in collectionView(cellForItemAt:_)
cell.imageInProfileCollection.image = imageArrayCells[indexPath.row].image