how do I load images from AWS S3 into UICollectionView? - ios

Question

I have a bucket in my AWS S3 backend full of images that I want to load onto my UICollectionViewCell's. What method should I implement to do so? I'm looking for the most efficient method as well.
I may note that currently in my project the frameworks I have are Alamofire, swiftyJSON, and Haneke (for caching purposes) although I do not know how to correctly use them to achieve my goal. I may also add that I'm using Parse.com as my BaaS, so if there is a method that can integrate parse in it, that would be welcomed as well.
So any suggestions In Swift?

Answer 1

The solution I suggested is to use Parse.com as the source of metadata for your books and s3 as the storage. I don't think you need any other components (and I'm particularly suspicious of net-code convenience wrappers for basic iOS stuff).
So I would (and did, to prove it works) setup a parse model like this...
And here's a vanilla ViewController in swift that has a collection view and an array of custom swift "Book" objects...
// ViewController.swift
import UIKit
import Parse
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
#IBOutlet weak private var collectionView : UICollectionView!
var books : Array<Book>!
override func viewDidLoad() {
super.viewDidLoad()
self.books = []
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
self.loadBooks()
}
func loadBooks() {
var query = PFQuery(className: "Book")
query.findObjectsInBackgroundWithBlock { (objects: [AnyObject]?, error: NSError?) -> Void in
if error == nil {
let bookObjects = objects as! [PFObject]
for (index, object) in enumerate(bookObjects) {
self.books.append(Book(pfBook: object))
}
}
self.collectionView.reloadData()
}
}
Basic stuff. When the view appears, query parse for book objects, when they are returned, create swift "Book" wrappers around them and reload the collection view. Here's the swift Book class ...
// Book.swift
import Parse
class Book: NSObject {
var pfBook : PFObject
var coverImage : UIImage!
init(pfBook: PFObject) {
self.pfBook = pfBook
}
func fetchCoverImage(completion: (image: UIImage?, error: NSError?) -> Void) {
let urlString = self.pfBook["coverUrl"] as! String
let url = NSURL(string: urlString)
let request = NSURLRequest(URL: url!)
let queue = dispatch_get_main_queue()
NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue()) { (response: NSURLResponse?, data: NSData?, error: NSError?) in
if error == nil {
self.coverImage = UIImage(data: data!)
completion(image: self.coverImage, error: nil)
} else {
completion(image: nil, error: error)
}
}
}
}
The interesting method fetches the cover image from the url saved in the PFObject. (Check out the url column in the parse.com data browser. I took a shortcut here and used an nice dummy image generator on the web. You would need to implement a method with the same signature, but have it get the image from s3).
The only thing left is the collection view datasource. Back again in ViewController.swift...
// ViewController.swift
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.books.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell",
forIndexPath:indexPath) as! UICollectionViewCell
if cell.backgroundView == nil { // brand new cell
let v = UIImageView(frame:cell.bounds)
v.tag = 32
v.contentMode = .ScaleToFill
cell.backgroundView = v
}
let book = self.books[indexPath.row]
let coverImage = book.coverImage
if coverImage == nil {
book.fetchCoverImage({ (image, error) -> Void in
collectionView.reloadItemsAtIndexPaths([indexPath])
})
} else {
let imageView = cell.viewWithTag(32) as! UIImageView
imageView.image = book.coverImage
}
return cell
}
Notice what we do in the cellForRow... method: if the book object has a cached coverImage, we place that in the image view. Otherwise we tell the book to fetch it's cover art and, when finished, reload the cell at the current index path (we don't depend on the cell being current anymore, since time passes while the image is being fetched).
Here's what it looks like running...

Answer 2

I was facing this problem and have a nice and well working solution, how to load images from AWS S3 to UIImageView in cell or other views. To do it I additional use a SDWebImage SDK SDWebImage
So let's create an extension for UIImageView and import SDWebImage, then add image cache to caching image links only
import UIKit
import SDWebImage
let imageCache = NSCache<NSString, NSString>()
extension UIImageView {
func loadAsyncWithCacheFromAWSS3(_ link: String?, placeholder: UIImage? = UIImage(named: "placeholder")) {
guard let unwrappedlink = link else { return self.image = placeholder }
// Use your own image appearing style
self.sd_imageTransition = .fade
if !loadFromCache(unwrappedlink as NSString, placeholder: placeholder) {
let file = File(bucket: 'YOUR BUCKET', key: unwrappedlink, region: 'YOUR REGION')
AWSManager.shared.getFileURL(file: file) { [weak self] (string, url, error) in
guard let validURL = url else { self?.image = placeholder; return }
imageCache.setObject(NSString(string: validURL.absoluteString), forKey: NSString(string: unwrappedlink))
guard unwrappedlink == link else {
guard let key = link else { return }
self?.loadFromCashe(key as NSString, placeholder: placeholder)
return
}
self?.sd_setImage(with: validURL, placeholderImage: placeholder, options: [.scaleDownLargeImages])
}
}
}
// quick load from existing cashed link
#discardableResult
private func loadFromCache(_ key: NSString, placeholder: UIImage?) -> Bool {
guard let string = imageCache.object(forKey: key) else { return false }
let link = URL(string: String(string))
self.sd_setImage(with: link, placeholderImage: placeholder, options: [.scaleDownLargeImages])
return true
}
}
Here is a singleton class with getFileURL method
func getFileURL(file: File, completionHandler: #escaping (String?, URL?, Error?) -> Void) {
let getPreSignedURLRequest = AWSS3GetPreSignedURLRequest()
getPreSignedURLRequest.bucket = file.bucket
getPreSignedURLRequest.key = file.key
getPreSignedURLRequest.httpMethod = .GET
getPreSignedURLRequest.expires = Date().adjust(hour: 24, minute: 0, second: 0)
getPreSignedURLRequest.minimumCredentialsExpirationInterval = 10
AWSS3PreSignedURLBuilder.s3PreSignedURLBuilder(forKey: 'YOUR BUILDER URL').getPreSignedURL(getPreSignedURLRequest).continueWith { (task: AWSTask<NSURL>) -> Any? in
if let error = task.error as NSError? {
completionHandler(nil, nil, error)
return nil
}
let presignedURL = task.result
completionHandler(file.key, presignedURL as URL?, nil)
return nil
}
}
in Appdelegate in func applicationDidReceiveMemoryWarning(_ application: UIApplication) simple call imageCache.removeAllObjects()