iOS download and save image inside app

Question

Is it possible for me to download an image from website and save it permanently inside my app? I really have no idea, but it would make a nice feature for my app.

Answer 1

Although it is true that the other answers here will work, they really aren't solutions that should ever be used in production code. (at least not without modification)

Problems

The problem with these answers is that if they are implemented as is and are not called from a background thread, they will block the main thread while downloading and saving the image. This is bad.

If the main thread is blocked, UI updates won't happen until the downloading/saving of the image is complete. As an example of what this means, say you add a UIActivityIndicatorView to your app to show the user that the download is still in progress (I will be using this as an example throughout this answer) with the following rough control flow:

1. Object responsible for starting the download is loaded.
2. Tell the activity indicator to start animating.
3. Start the synchronous download process using +[NSData dataWithContentsOfURL:]
4. Save the data (image) that was just downloaded.
5. Tell the activity indicator to stop animating.

Now, this might seem like reasonable control flow, but it is disguising a critical problem.

When you call the activity indicator's startAnimating method on the main (UI) thread, the UI updates for this event won't actually happen until the next time the main run loop updates, and this is where the first major problem is.

Before this update has a chance to happen, the download is triggered, and since this is a synchronous operation, it blocks the main thread until it has finished download (saving has the same problem). This will actually prevent the activity indicator from starting its animation. After that you call the activity indicator's stopAnimating method and expect all to be good, but it isn't.

At this point, you'll probably find yourself wondering the following.

Why doesn't my activity indicator ever show up?

Well, think about it like this. You tell the indicator to start but it doesn't get a chance before the download starts. After the download completes, you tell the indicator to stop animating. Since the main thread was blocked through the whole operation, the behavior you actually see is more along the lines telling the indicator to start and then immediately telling it to stop, even though there was a (possibly) large download task in between.

Now, in the best case scenario, all this does is cause a poor user experience (still really bad). Even if you think this isn't a big deal because you're only downloading a small image and the download happens almost instantaneously, that won't always be the case. Some of your users may have slow internet connections, or something may be wrong server side keeping the download from starting immediately/at all.

In both of these cases, the app won't be able to process UI updates, or even touch events while your download task sits around twiddling its thumbs waiting for the download to complete or for the server to respond to its request.

What this means is that synchronously downloading from the main thread prevents you from possibly implementing anything to indicate to the user that a download is currently in progress. And since touch events are processed on the main thread as well, this throws out the possibility of adding any kind of cancel button as well.

Then in the worst case scenario, you'll start receiving crash reports stating the following.

Exception Type: 00000020 Exception Codes: 0x8badf00d

These are easy to identify by the exception code 0x8badf00d, which can be read as "ate bad food". This exception is thrown by the watch dog timer, whose job is to watch for long running tasks that block the main thread, and to kill the offending app if this goes on for too long. Arguably, this is still a poor user experience issue, but if this starts to occur, the app has crossed the line between bad user experience, and terrible user experience.

Here's some more info on what can cause this to happen from Apple's Technical Q&A about synchronous networking (shortened for brevity).

The most common cause for watchdog timeout crashes in a network application is synchronous networking on the main thread. There are four contributing factors here:

1. synchronous networking — This is where you make a network request and block waiting for the response.
2. main thread — Synchronous networking is less than ideal in general, but it causes specific problems if you do it on the main thread. Remember that the main thread is responsible for running the user interface. If you block the main thread for any significant amount of time, the user interface becomes unacceptably unresponsive.
3. long timeouts — If the network just goes away (for example, the user is on a train which goes into a tunnel), any pending network request won't fail until some timeout has expired....

...

4. watchdog — In order to keep the user interface responsive, iOS includes a watchdog mechanism. If your application fails to respond to certain user interface events (launch, suspend, resume, terminate) in time, the watchdog will kill your application and generate a watchdog timeout crash report. The amount of time the watchdog gives you is not formally documented, but it's always less than a network timeout.

One tricky aspect of this problem is that it's highly dependent on the network environment. If you always test your application in your office, where network connectivity is good, you'll never see this type of crash. However, once you start deploying your application to end users—who will run it in all sorts of network environments—crashes like this will become common.

Now at this point, I'll stop rambling about why the provided answers might be problematic and will start offering up some alternative solutions. Keep in mind that I've used the URL of a small image in these examples and you'll notice a larger difference when using a higher resolution image.

---

Solutions

I'll start by showing a safe version of the other answers, with the addition of how to handle UI updates. This will be the first of several examples, all of which will assume that the class in which they are implemented has valid properties for a UIImageView, a UIActivityIndicatorView, as well as the documentsDirectoryURL method to access the documents directory. In production code, you may want to implement your own method to access the documents directory as a category on NSURL for better code reusability, but for these examples, this will be fine.

- (NSURL *)documentsDirectoryURL {     NSError *error = nil;     NSURL *url = [[NSFileManager defaultManager] URLForDirectory:NSDocumentDirectory                                                         inDomain:NSUserDomainMask                                                appropriateForURL:nil                                                           create:NO                                                            error:&error];     if (error) {         // Figure out what went wrong and handle the error.     }          return url; } 

These examples will also assume that the thread that they start off on is the main thread. This will likely be the default behavior unless you start your download task from somewhere like the callback block of some other asynchronous task. If you start your download in a typical place, like a lifecycle method of a view controller (i.e. viewDidLoad, viewWillAppear:, etc.) this will produce the expected behavior.

This first example will use the +[NSData dataWithContentsOfURL:] method, but with some key differences. For one, you'll notice that in this example, the very first call we make is to tell the activity indicator to start animating, then there is an immediate difference between this and the synchronous examples. Immediately, we use dispatch_async(), passing in the global concurrent queue to move execution to the background thread.

At this point, you've already greatly improved your download task. Since everything within the dispatch_async() block will now happen off the main thread, your interface will no longer lock up, and your app will be free to respond to touch events.

What is important to notice here is that all of the code within this block will execute on the background thread, up until the point where the downloading/saving of the image was successful, at which point you might want to tell the activity indicator to stopAnimating, or apply the newly saved image to a UIImageView. Either way, these are updates to the UI, meaning you must dispatch back the the main thread using dispatch_get_main_queue() to perform them. Failing to do so results in undefined behavior, which may cause the UI to update after an unexpected period of time, or may even cause a crash. Always make sure you move back to the main thread before performing UI updates.

// Start the activity indicator before moving off the main thread [self.activityIndicator startAnimating]; // Move off the main thread to start our blocking tasks. dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{     // Create the image URL from a known string.     NSURL *imageURL = [NSURL URLWithString:@"http://www.google.com/images/srpr/logo3w.png"];          NSError *downloadError = nil;     // Create an NSData object from the contents of the given URL.     NSData *imageData = [NSData dataWithContentsOfURL:imageURL                                               options:kNilOptions                                                 error:&downloadError];     // ALWAYS utilize the error parameter!     if (downloadError) {         // Something went wrong downloading the image. Figure out what went wrong and handle the error.         // Don't forget to return to the main thread if you plan on doing UI updates here as well.         dispatch_async(dispatch_get_main_queue(), ^{             [self.activityIndicator stopAnimating];             NSLog(@"%@",[downloadError localizedDescription]);         });     } else {         // Get the path of the application's documents directory.         NSURL *documentsDirectoryURL = [self documentsDirectoryURL];         // Append the desired file name to the documents directory path.         NSURL *saveLocation = [documentsDirectoryURL URLByAppendingPathComponent:@"GCD.png"];          NSError *saveError = nil;         BOOL writeWasSuccessful = [imageData writeToURL:saveLocation                                                 options:kNilOptions                                                   error:&saveError];         // Successful or not we need to stop the activity indicator, so switch back the the main thread.         dispatch_async(dispatch_get_main_queue(), ^{             // Now that we're back on the main thread, you can make changes to the UI.             // This is where you might display the saved image in some image view, or             // stop the activity indicator.                          // Check if saving the file was successful, once again, utilizing the error parameter.             if (writeWasSuccessful) {                 // Get the saved image data from the file.                 NSData *imageData = [NSData dataWithContentsOfURL:saveLocation];                 // Set the imageView's image to the image we just saved.                 self.imageView.image = [UIImage imageWithData:imageData];             } else {                 NSLog(@"%@",[saveError localizedDescription]);                 // Something went wrong saving the file. Figure out what went wrong and handle the error.             }                          [self.activityIndicator stopAnimating];         });     } }); 

Now keep in mind, that the method shown above is still not an ideal solution considering it can't be cancelled prematurely, it gives you no indication of the progress of the download, it can't handle any kind of authentication challenge, it can't be given a specific timeout interval, etc. (lots and lots of reasons). I'll cover a few of the better options below.

In these examples, I'll only be covering solutions for apps targeting iOS 7 and up considering (at time of writing) iOS 8 is the current major release, and Apple is suggesting only supporting versions N and N-1. If you need to support older iOS versions, I recommend looking into the NSURLConnection class, as well as the 1.0 version of AFNetworking. If you look at the revision history of this answer, you can find basic examples using NSURLConnection and ASIHTTPRequest, although it should be noted that ASIHTTPRequest is no longer being maintained, and should not be used for new projects.

---

NSURLSession

Lets start with NSURLSession, which was introduced in iOS 7, and greatly improves the ease with which networking can be done in iOS. With NSURLSession, you can easily perform asynchronous HTTP requests with a callback block and handle authentication challenges with its delegate. But what makes this class really special is that it also allows for download tasks to continue running even if the application is sent to the background, gets terminated, or even crashes. Here's a basic example of its usage.

// Start the activity indicator before starting the download task. [self.activityIndicator startAnimating];  NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration]; // Use a session with a custom configuration NSURLSession *session = [NSURLSession sessionWithConfiguration:configuration]; // Create the image URL from some known string. NSURL *imageURL = [NSURL URLWithString:@"http://www.google.com/images/srpr/logo3w.png"]; // Create the download task passing in the URL of the image. NSURLSessionDownloadTask *task = [session downloadTaskWithURL:imageURL completionHandler:^(NSURL *location, NSURLResponse *response, NSError *error) {     // Get information about the response if neccessary.     if (error) {         NSLog(@"%@",[error localizedDescription]);         // Something went wrong downloading the image. Figure out what went wrong and handle the error.         // Don't forget to return to the main thread if you plan on doing UI updates here as well.         dispatch_async(dispatch_get_main_queue(), ^{             [self.activityIndicator stopAnimating];         });     } else {         NSError *openDataError = nil;         NSData *downloadedData = [NSData dataWithContentsOfURL:location                                                        options:kNilOptions                                                          error:&openDataError];         if (openDataError) {             // Something went wrong opening the downloaded data. Figure out what went wrong and handle the error.             // Don't forget to return to the main thread if you plan on doing UI updates here as well.             dispatch_async(dispatch_get_main_queue(), ^{                 NSLog(@"%@",[openDataError localizedDescription]);                 [self.activityIndicator stopAnimating];             });         } else {             // Get the path of the application's documents directory.             NSURL *documentsDirectoryURL = [self documentsDirectoryURL];             // Append the desired file name to the documents directory path.             NSURL *saveLocation = [documentsDirectoryURL URLByAppendingPathComponent:@"NSURLSession.png"];             NSError *saveError = nil;                          BOOL writeWasSuccessful = [downloadedData writeToURL:saveLocation                                                           options:kNilOptions                                                             error:&saveError];             // Successful or not we need to stop the activity indicator, so switch back the the main thread.             dispatch_async(dispatch_get_main_queue(), ^{                 // Now that we're back on the main thread, you can make changes to the UI.                 // This is where you might display the saved image in some image view, or                 // stop the activity indicator.                                  // Check if saving the file was successful, once again, utilizing the error parameter.                 if (writeWasSuccessful) {                     // Get the saved image data from the file.                     NSData *imageData = [NSData dataWithContentsOfURL:saveLocation];                     // Set the imageView's image to the image we just saved.                     self.imageView.image = [UIImage imageWithData:imageData];                 } else {                     NSLog(@"%@",[saveError localizedDescription]);                     // Something went wrong saving the file. Figure out what went wrong and handle the error.                 }                                  [self.activityIndicator stopAnimating];             });         }     } }];  // Tell the download task to resume (start). [task resume]; 

From this you'll notice that the downloadTaskWithURL: completionHandler: method returns an instance of NSURLSessionDownloadTask, on which an instance method -[NSURLSessionTask resume] is called. This is the method that actually tells the download task to start. This means that you can spin up your download task, and if desired, hold off on starting it (if needed). This also means that as long as you store a reference to the task, you can also utilize its cancel and suspend methods to cancel or pause the task if need be.

What's really cool about NSURLSessionTasks is that with a little bit of KVO, you can monitor the values of its countOfBytesExpectedToReceive and countOfBytesReceived properties, feed these values to an NSByteCountFormatter, and easily create a download progress indicator to your user with human readable units (e.g. 42 KB of 100 KB).

Before I move away from NSURLSession though, I'd like to point out that the ugliness of having to dispatch_async back to the main threads at several different points in the download's callback block can be avoided. If you chose to go this route, you can initialize the session with its initializer that allows you to specify the delegate, as well as the delegate queue. This will require you to use the delegate pattern instead of the callback blocks, but this may be beneficial because it is the only way to support background downloads.

NSURLSession *session = [NSURLSession sessionWithConfiguration:configuration                                                       delegate:self                                                  delegateQueue:[NSOperationQueue mainQueue]]; 

---

AFNetworking 2.0

If you've never heard of AFNetworking, it is IMHO the end-all of networking libraries. It was created for Objective-C, but it works in Swift as well. In the words of its author:

AFNetworking is a delightful networking library for iOS and Mac OS X. It's built on top of the Foundation URL Loading System, extending the powerful high-level networking abstractions built into Cocoa. It has a modular architecture with well-designed, feature-rich APIs that are a joy to use.

AFNetworking 2.0 supports iOS 6 and up, but in this example, I will be using its AFHTTPSessionManager class, which requires iOS 7 and up due to its usage of all the new APIs around the NSURLSession class. This will become obvious when you read the example below, which shares a lot of code with the NSURLSession example above.

There are a few differences that I'd like to point out though. To start off, instead of creating your own NSURLSession, you'll create an instance of AFURLSessionManager, which will internally manage a NSURLSession. Doing so allows you take advantage of some of its convenience methods like -[AFURLSessionManager downloadTaskWithRequest:progress:destination:completionHandler:]. What is interesting about this method is that it lets you fairly concisely create a download task with a given destination file path, a completion block, and an input for an NSProgress pointer, on which you can observe information about the progress of the download. Here's an example.

// Use the default session configuration for the manager (background downloads must use the delegate APIs) NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration]; // Use AFNetworking's NSURLSessionManager to manage a NSURLSession. AFURLSessionManager *manager = [[AFURLSessionManager alloc] initWithSessionConfiguration:configuration];  // Create the image URL from some known string. NSURL *imageURL = [NSURL URLWithString:@"http://www.google.com/images/srpr/logo3w.png"]; // Create a request object for the given URL. NSURLRequest *request = [NSURLRequest requestWithURL:imageURL]; // Create a pointer for a NSProgress object to be used to determining download progress. NSProgress *progress = nil;  // Create the callback block responsible for determining the location to save the downloaded file to. NSURL *(^destinationBlock)(NSURL *targetPath, NSURLResponse *response) = ^NSURL *(NSURL *targetPath, NSURLResponse *response) {     // Get the path of the application's documents directory.     NSURL *documentsDirectoryURL = [self documentsDirectoryURL];     NSURL *saveLocation = nil;          // Check if the response contains a suggested file name     if (response.suggestedFilename) {         // Append the suggested file name to the documents directory path.         saveLocation = [documentsDirectoryURL URLByAppendingPathComponent:response.suggestedFilename];     } else {         // Append the desired file name to the documents directory path.         saveLocation = [documentsDirectoryURL URLByAppendingPathComponent:@"AFNetworking.png"];     }      return saveLocation; };  // Create the completion block that will be called when the image is done downloading/saving. void (^completionBlock)(NSURLResponse *response, NSURL *filePath, NSError *error) = ^void (NSURLResponse *response, NSURL *filePath, NSError *error) {     dispatch_async(dispatch_get_main_queue(), ^{         // There is no longer any reason to observe progress, the download has finished or cancelled.         [progress removeObserver:self                       forKeyPath:NSStringFromSelector(@selector(fractionCompleted))];                  if (error) {             NSLog(@"%@",error.localizedDescription);             // Something went wrong downloading or saving the file. Figure out what went wrong and handle the error.         } else {             // Get the data for the image we just saved.             NSData *imageData = [NSData dataWithContentsOfURL:filePath];             // Get a UIImage object from the image data.             self.imageView.image = [UIImage imageWithData:imageData];         }     }); };  // Create the download task for the image. NSURLSessionDownloadTask *task = [manager downloadTaskWithRequest:request                                                          progress:&progress                                                       destination:destinationBlock                                                 completionHandler:completionBlock]; // Start the download task. [task resume];  // Begin observing changes to the download task's progress to display to the user. [progress addObserver:self            forKeyPath:NSStringFromSelector(@selector(fractionCompleted))               options:NSKeyValueObservingOptionNew               context:NULL]; 

Of course since we've added the class containing this code as an observer to one of the NSProgress instance's properties, you'll have to implement the -[NSObject observeValueForKeyPath:ofObject:change:context:] method. In this case, I've included an example of how you might update a progress label to display the download's progress. It's really easy. NSProgress has an instance method localizedDescription which will display progress information in a localized, human readable format.

- (void)observeValueForKeyPath:(NSString *)keyPath                       ofObject:(id)object                         change:(NSDictionary *)change                        context:(void *)context {     // We only care about updates to fractionCompleted     if ([keyPath isEqualToString:NSStringFromSelector(@selector(fractionCompleted))]) {         NSProgress *progress = (NSProgress *)object;         // localizedDescription gives a string appropriate for display to the user, i.e. "42% completed"         self.progressLabel.text = progress.localizedDescription;     } else {         [super observeValueForKeyPath:keyPath                              ofObject:object                                change:change                               context:context];     } } 

Don't forget, if you want to use AFNetworking in your project, you'll need to follow its installation instructions and be sure to #import <AFNetworking/AFNetworking.h>.

Alamofire

And finally, I'd like to give a final example using Alamofire. This is a the library that makes networking in Swift a cake-walk. I'm out of characters to go into great detail about the contents of this sample, but it does pretty much the same thing as the last examples, just in an arguably more beautiful way.

// Create the destination closure to pass to the download request. I haven't done anything with them // here but you can utilize the parameters to make adjustments to the file name if neccessary. let destination = { (url: NSURL!, response: NSHTTPURLResponse!) -> NSURL in     var error: NSError?     // Get the documents directory     let documentsDirectory = NSFileManager.defaultManager().URLForDirectory(.DocumentDirectory,         inDomain: .UserDomainMask,         appropriateForURL: nil,         create: false,         error: &error     )          if let error = error {         // This could be bad. Make sure you have a backup plan for where to save the image.         println("\(error.localizedDescription)")     }          // Return a destination of .../Documents/Alamofire.png     return documentsDirectory!.URLByAppendingPathComponent("Alamofire.png") }  Alamofire.download(.GET, "http://www.google.com/images/srpr/logo3w.png", destination)     .validate(statusCode: 200..<299) // Require the HTTP status code to be in the Successful range.     .validate(contentType: ["image/png"]) // Require the content type to be image/png.     .progress { (bytesRead, totalBytesRead, totalBytesExpectedToRead) in         // Create an NSProgress object to represent the progress of the download for the user.         let progress = NSProgress(totalUnitCount: totalBytesExpectedToRead)         progress.completedUnitCount = totalBytesRead                  dispatch_async(dispatch_get_main_queue()) {             // Move back to the main thread and update some progress label to show the user the download is in progress.             self.progressLabel.text = progress.localizedDescription         }     }     .response { (request, response, _, error) in         if error != nil {             // Something went wrong. Handle the error.         } else {             // Open the newly saved image data.             if let imageData = NSData(contentsOfURL: destination(nil, nil)) {                 dispatch_async(dispatch_get_main_queue()) {                     // Move back to the main thread and add the image to your image view.                     self.imageView.image = UIImage(data: imageData)                 }             }         }     } 

Answer 2

Asynchronous downloaded images with caching

Asynchronous downloaded images with caching

Here is one more repos which can be used to download images in background