This tutorial is written for Skygear, a backend-as-a-service (BaaS) that helps you build serverless apps. Skygear includes features such as push notifications, cloud database, and user authentication.
Go Serverless
Almost any app these days has a photo uploading feature. Whether it’s a social app or a review platform, a photo uploading feature is essential for gathering user-generated content. A feature like this shouldn’t take a whole day to write. Here’s a walkthrough for you to develop a simple app that allows you to upload images and share them using Skygear.
As mentioned, Skygear is a serverless platform for building apps. One of the features, Skygear CloudDB, enables you to upload your user-generated content to the cloud storage. This content can be images, videos, or even audio files. The files will be hosted in the cloud and made available for your mobile app clients. You can download the Swift photo feed demo and run on Xcode to see how photo upload works.
Setup your Skygear backend
First thing, in this example, you have to initialize Skygear before any Skygear app reference is created or used. If you have already done this for another Skygear feature, you can skip this step.
Initialize Skygear:
- Create your app backend on Skygear Portal (2 mins)
- Install the Skygear SDK (10 mins)
- Import
SKYKitmodule & other configuration into your code (3 mins)
You can follow this step-by-step iOS guide to initialize Skygear.
Uploading a photo
Ok. Let’s start implementing the uploading photos feature. In Skygear, you can make use of Asset to store file references, such as images and videos on the database. Let’s say, your user has taken a photo. In order to have the photo uploaded, we will call the uploadAsset API to upload the photo image file as an asset.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
let container = SKYContainer.default()! guard let asset = SKYAsset(data: imageData) else { onCompletion(false) return } asset.mimeType = "image/jpg" container.uploadAsset(asset, completionHandler: { uploadedAsset, error in if let error = error { print("Error uploading asset: \(error)") } else { // Handle upload success print("Asset uploaded: \(uploadedAsset)") // TODO: Save the asset with a Photo record } }) |
In the above sample code, we define an uploadable SKYAsset and set the chosen image data as the asset data. We also set the mimeType of the asset as image/jpg. Upon calling uploadAssest, the asset assigned will be uploaded. Then we pass to the completionHandler to handle success / fail upload case.
You can check the full list of supported mime types here.
Saving the asset with a photo record
Since we want to query the photo later, we have to save the image to the cloud database.
In Skygear, an asset can only be saved with a record but not as a standalone upload. We will create a photo record and assign the uploaded asset as asset of the record.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
if let uploadedAsset = uploadedAsset { let photo = SKYRecord(recordType: "photo") photo?.setObject(uploadedAsset, forKey: "asset" as NSCopying) publicDB.save(photo!, completion: { record, error in if let error = error { // Error saving print("Error saving record: \(error)") } else { if let recordID = record?.recordID { print("Saved record with RecordID: \(recordID)") } } }) } else { print("Error.") } |
Fetching the uploaded photos
Now, we want to load back the photos we’ve uploaded through the app.
To access the photos, we need to query the photo records. We can directly access the uploaded asset with SKYAsset.url .
|
1 2 3 4 5 6 7 8 9 10 11 |
let query = SKYQuery(recordType: "photo", predicate: nil) publicDB.perform(query!, completionHandler: { photos, error in for photo in photos { let imageAsset = photo.object(forKey: "asset") as? SKYAsset else { continue } // Handle imageAsset.url print("Image URL: \(imageAsset.url)") } }) |
As a result, we have imageAsset.url in hand , so we can load back the image and display it on any device.
To learn more about Skygear
In addition to images, you can also upload other file types (such as voice messages, PDF files, live recordings, etc) to the serverless platform. Please see detailed documentation about file uploading here: Skygear iOS Assets (File Upload). If you need my support on trying it out, just ping me (David) on Skygear Google Group.
Tell us what you think and subscribe to our blog for more project updates!
Oursky
