Swift Alamofire tutorial uploading and downloading images
Posted on May 2, 2017 by Paul
This is a short tutorial about uploading and downloading images with Alamofire from an iOS, Swift 3, application.
I assume that you have the latest Xcode installed on your Mac, and that you know how to code small iOS applications in Swift 3.
I also assume that you have access to a server, ideally you have your own server with a domain name and a SSL certificate installed. If this is not the case, you can use a local Apache or NGINX web server. Personally, I use the free version of MAMPP which allows me to easily switch between Apache and NGINX if necessary. A good alternative to MAMPP is XAMPP. As a side note, macOS comes with an old version of Apache and PHP 5.3 already installed.
First, you need to install Alamofire. I found that the easiest approach to get started with Alamofire for iOS projects is to use CocoaPods. Open a Terminal and install CocoaPods:
The above command will use the outdated Ruby 2.0 that comes with macOS.
Optionally, if you want to use a more modern Ruby, you can use the Homebrew package manager:
Check if you can use the latest Ruby version with:
Now, you can install CocoaPods:
Once you have CocoPods installed, open Xcode and create a new project, select Single View Application and be sure to select Swift in the language drop down list:
Close the Xcode project and, from a Terminal, go to the project folder. Assuming you’ve named your project “AlamofireExample” and that you’ve saved it on your Desktop:
Now, create a new Podfile and open this in your preferred text editor:
Change the content of the file from:
save and close the file.
Now, execute the next command in Terminal:
From now on, you will use AlamofireExample.xcworkspace instead of the usual AlamofireExample.xcodeproj. Just double click on AlamofireExample.xcworkspace and it will open in Xcode.
Drag an image from your computer to the AlamoFireExample project and be sure to check Copy items if needed. You can use the same image as me, tree.png, if you wish. I will use this image to exemplify uploading an image from our iOS application.
For the download image test, you can use any image from the web, or you can use same image as me https://solarianprogrammer.com/images/2013/02/28/mandelbrot_piece_Z2.png. You will need the link of the above image in your iOS app.
In Xcode, select the Main.storyboard and drag an Image View to the center of the View Controller. I suggest to add some constraints to the Image View. First make sure it is aligned horizontally and vertically:
Next, set the image view to be 300x300 points:
Set the content mode of the image to Aspect Fit:
Next, we’ll need to get a reference to the image view from the Main.storyboard in our code. Select the view controller from the Main.storyboard and click on the double circle symbol in the top right corner of Xcode. This should open ViewController.swift in a second window to the right.
Now, click on the UIImageView, press CTRL and drag the line toward ViewController.swift. Leave it just above the viewDidLoad(). Chose a descriptive name, something like downloadImage and press Connect:
Import the Alamofire module in ViewController.swift:
If you see an error, simply build the project, after which Xcode will recognize the Alamofire module.
Next, let’s write some code to download an image from a given URL:
If you run the above code in the iPhone Simulator, this is what you should see:
Next, let’s write the image upload example. For simplicity we will use an image bundled with our application, the tree.png we’ve added earlier to our project. The same technique we’ll present here can be employed if you, for example, use an image from your device photos, you just need to add some boilerplate code.
First, we can get the URL of our bundled image with:
Usually, no server will let you upload an image without some form of authentication. For our example we’ll use a dummy user name and password:
By default, iOS (the App Transport Security policy) won’t let you send HTTP requests to a server without a valid SSL certificate. If you use a local Apache or NGINX server for development, you usually don’t have a SSL certificate. In order to be able to use this local server, we need to add an exception for our localhost.
In Xcode, right click on Info.plist and select Open As source code. Copy the next lines just before the last closing dict tag:
You should see something like this:
For my machine, I have an Apache server running at http://localhost:8888 and I’ll save the PHP script that will receive the uploaded image in a file named upload_image.php. So, I will send the upload request to http://localhost:8888/upload_image.php. Be sure that you have write rights on your target server, otherwise the upload will fail.
Here is the simple PHP script that I will use as an example:
Please note, that I don’t check for errors in the above PHP code. For illustration purposes, the code will send back the content of the $_FILES and $_POST PHP superglobals. Don’t use the above code on a production server!
Now, let’s write the Swift code that will upload the image bundled with the application:
Here is the response from the server, the jsonResponse variable from the Swift code, as seen in the output window of Xcode:
If you want to learn more about Swift and iOS programming I would recommend reading Swift Programming by Matthew Mathias and John Gallagher:
or iOS Programming by Christian Keur and Aaron Hillegass: