iOS Tutorial: Import Dropbox Photos Easily WIth Dropbox API Integration

A few years back, finding an iOS app with integrated cloud services was rare.

There were not many services that offered APIs for Integration, and only a small amount of users had constant 3G and Wifi connections. But as the technologies improved, it became a necessity to add such features in mobile applications. Necessity because this is one of those features that users nowadays expect to see in the iOS applications.

However, not so long ago, we had written a tutorial on Cloudkit Integration, which is a cloud solution offered by Apple.

But today, we’ve created a short demo that shows the step-by-step process of Dropbox integration to import photos from dropbox account.

Now, if you’re not a dropbox user, it’s a good time to give it try. It consists of useful options to store files online and sharing it with other people.

Now without any further ado, let’s get started!

Implementing Dropbox Integration

To start with Dropbox fetch image first of all go to
https://www.dropbox.com/developers/apps and add your app.

 

Now select the options shown in the below image and create an app in Dropbox.

Once you create it, get your app key.

Now open your XCode and create a new project under the file menu and select “Single View Application”.

In the next tab, name your project. Here we’re naming it as “SODropbox”.

To install Dropbox SDK, you’ll need to install a pod file in your app. For this, you can refer to our Cocoapods swift tutorial.

Once you install the Dropbox SDK, add pods by following.

pod ‘SwiftyDropbox‘

Go to info.plist. Open it as source code by right click and add the following code in that.

<key>LSApplicationQueriesSchemes</key>
<array>
<string>dbapi-8-emm</string>
<string>dbapi-2</string>
</array>

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>db-<APP_KEY></string>
</array>
<key>CFBundleURLName</key>
<string></string>
</dict>
</array>

Add your app key of an app you have created in starting of this tutorial.

Now import SwiftyDropbox in Appdelegate.swift

Write below code in didFinishLauching.

Dropbox.setupWithAppKey(“YOUR_APPKEY_HERE”)

Define this method in AppDelegate.

func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject) -> Bool
{
if let authResult = Dropbox.handleRedirectURL(url) {
switch authResult {
case .Success( _):
break
case .Error(_, _):
break
}
}
return false
}

Now Create and object of Mutable Array in “ViewController.swift” for store path/image of Dropbox Image

let arrDropboxImages = NSMutableArray()

To fetch images from Dropbox, we need to authenticate user first. For that we’ll call the below method on button action.

@IBAction func actionDropboxLogin(sender: AnyObject) {

if (Dropbox.authorizedClient != nil) {

//User is already authorized
//Fetch images from user's DropBox folder
self.getImageFromDropbox()
} else {

//User not authorized
//So we go for authorizing user first.
Dropbox.authorizeFromController(UIApplication.sharedApplication(), controller: self, openURL: { (url) in
UIApplication.sharedApplication().openURL(url)

//Fetch images from user's DropBox folder
self.getImageFromDropbox()
})

}
}

If a user is already authorized then it will go to “getImageFromDropbox()” for fetch image else it will go for authentication first then call “getImageFromDropbox()” method.
Fetch method is shown below.

//Fetch all images from DropBox
func getImageFromDropbox() {

let client = Dropbox.authorizedClient

//Get list of folder of dropbox by set (path: "/")
//Or you can get folder inside a folder by set (path: "/Photos")
client!.files.listFolder(path: "/Photos/1").response({ (objList, error) in
if let resultList = objList {

//Create a for loop for getting all the entities individually
for entry in resultList.entries {

//Check if file have metadata or not
if let fileMetadata = entry as? Files.FileMetadata {

//Check file type by extention .jpg/.png
//You can check this by your own added extention
if self.isFileImage(fileMetadata.name) == true {

//Get Path for save image in document directory
let destination : (NSURL, NSHTTPURLResponse) -> NSURL = { temporaryURL, response in
return self.getDocumentDirectoryPath(fileMetadata.name)
}

//Download Image on destination path
client!.files.download(path: fileMetadata.pathLower!, destination: destination).response { response, error in
if let (_, url) = response {
let data = NSData(contentsOfURL: url)
let img = UIImage(data: data!)

if !self.arrSelectImages.containsObject(img!) {
self.arrSelectImages.addObject(img!)

}
else {
print("Image already added to array")
}
}
}
} else {
//File is not an image
}
} else {
//If file have not metadata it mean it is a folder.
}

}

} else {
print(error)
}
})
}

//MARK: check for file type
private func isFileImage(filename:String) -> Bool {
let lastPathComponent = filename.pathExtension().lowercaseString
return lastPathComponent == "jpg" || lastPathComponent == "png"
}

//to get document directory path
func getDocumentDirectoryPath(fileName:String) -> NSURL {
let fileManager = NSFileManager.defaultManager()
let directoryURL = fileManager.URLsForDirectory(.DocumentDirectory, inDomains: .UserDomainMask)[0]
let UUID = NSUUID().UUIDString
let pathComponent = "\(UUID)-\(fileName)"
return directoryURL.URLByAppendingPathComponent(pathComponent)
}

You will get images in “arrDropboxImages” and can use in code to show it in tableView/collectionView.
Here’s how it should look like:

That wasn’t hard, right? And implementing this API could always benefit your app users. Because nowadays, we all like having options right?

However, this was just a simple demo with a single feature, but there’s much more you can add through Dropbox API. So if you need any further information and assistance to develop Dropbox integrated iOS apps, reach to us. We’re an iPhone app development company with more than 5 years of experience. Not only we’ve developed more than 2000 mobile applications, but we were also the first to implement 15+ unique features in the App store.

You can download the source of Dropbox Integration demo on GitHub.