Image Download Application in iPhone

Most of the iPhone applications require the images to be downloaded from the web server. Depending upon the web service (API) provided, there are some methods to download the image. In this tutorial we will explain how to download the image from a remote server using NSURLConnection Delegates. Later we will explain how to save the image in application bundle (i.e Documents folder) for future use.

Open Xcode, select “Create a new Xcode project,” and click Next. Choose the Single View Application template as shown in the following figure.

Click Next, then you navigate to the next screen. Fill all the fields like product name (ImageDownload), organization name and etc. In the bottom of the screen just uncheck “Use Storyboards”(As I have use the nib files in this application) and “Include Unit Tests” as shown in the following figure.

Then click Next button.
Open the ViewController.xib file and add the required outlets as shown below.

Here UIProgressView outlet shows how much percentage of data has been downloaded. After downloading the full data, UIImageView will display the downloaded image.
Finally, connect these outlets with the reference objects in ViewController.h file. Following figure shows the required connections.

Now open the ViewController.h file and add the following code.


#import <uikit/UIKit.h>

@interface ViewController : UIViewController<nsurlconnectionDelegate,NSURLConnectionDataDelegate>

@property(nonatomic, strong) NSMutableData *imageData;
@property(nonatomic, assign) float length;

@property(nonatomic, strong) IBOutlet UIProgressView *progressView;
@property(nonatomic, strong) IBOutlet UIImageView *imageView;
@property(nonatomic, strong) IBOutlet UILabel *timeLabel;

- (void)saveLocally:(NSData *)imgData;



Here “imageData” will contains the data downloaded from server, “length” will contains the total image data length. And NSURLConnectionDelegate, NSURLConnectionDataDelegate are the delegate protocols for tracking the image data response, how much data is downloaded, and failure responses.
Now open the ViewController.m file. In viewDidLoad method, add the following lines of code.


self.imageData = [[NSMutableData alloc]init];
[NSURLConnection connectionWithRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@""]]delegate:self];



Here we will download the image from URL For the best progress of the progress view, we have taken the image of size 10MB.

Now for responding to authentication challenges we need to implement the delegate protocols. From the following code, in “didReceiveResponse” delegate we will find the expected length of the total image data for calculating the percentage of image downloaded. This delegate will call only once for each connection. The delegate “didReceiveData” will call several times until the entire image data is downloaded. In this delegate, we append the downloaded data to “imageData” and also added the code for calculating percentage of image downloaded. “connectionDidFinishLoading” delegate will call when entire image data is downloaded. Here we handle the image display part. Implementation of delegate methods is as follows:


- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response
self.length = [response expectedContentLength];

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
[self.imageData appendData:data];
float progress = (float)[imageData length]/(float)self.length;
self.timeLabel.text = [NSString stringWithFormat:@"%0.2f%%",progress*100];
[self.progressView setProgress:progress animated:YES];

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error

- (void)connectionDidFinishLoading:(NSURLConnection *)connection
UIImage *img = [UIImage imageWithData:self.imageData];
self.imageView.image = img;
[self saveLocally:self.imageData];



Now compile and run the code. You will see the accurate download progress view and downloaded image as follows:

Some applications need the local storage of data to avoid the same data to be downloaded several times. To achieve the local storage we need to save this image locally into applications document folder. “saveLocally:” method will do the local storage.


- (void)saveLocally:(NSData *)imgData
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSDate *aDate = [NSDate date];
NSTimeInterval interval = [aDate timeIntervalSince1970];
NSString *localFilePath = [documentsDirectory stringByAppendingPathComponent:[NSString stringWithFormat:@"%d.jpeg",(int)interval]];
[imgData writeToFile:localFilePath atomically:YES];



Here for each image download, we are giving a deferent name as per the epoch time. Now compile and run the code, you will see the image to be saved in applications document folder. Documents folder for your application is located in the following path /Users/startup/Library/Application Support/iPhone Simulator/6.1/Applications/3747D38D-9D04-4A58-9327-DFEE22740A81/Documents. Following screenshot shows the saved image under documents folder of the application.

Leave a Comment:

Tutorial on Image Picker controller in iPhone | iPhone Tutorial | iPhone iOS4 iPad SDK Development & Programming Blog says April 19, 2013

[…] dl { margin: 0px 0px 0px 0px; } dt { margin: 0px 0px 0px 0px; } dd { margin: 0px 0px 0px 25px; } form { margin: 0px 0px 0px 0px; } h1 { margin: 0px 0px 20px 0px; } h2 { margin: 20px 0px 10px 0px; } p { margin: 0px 0px 5px 0px; } body { font: 100 13px Arial, Sans-Serif; } b { font: 900 1.0em Arial, Sans-Serif; } h1 { font: 900 1.4em Arial, Sans-Serif; } h2 { font: 900 1.4em Arial, Sans-Serif; } small { font: 100 0.8em Verdana, Sans-Serif; } function validate(sender) { if ($(sender).find( 'input[name=title]' ).val() == '') { alert('Please, fill in all required fields'); $(sender).find( 'input[name=title]' ).select(); return false; } if ($(sender).find('textarea[name=contents]').val() == '') { alert('Please, fill in all required fields'); $(sender).find('textarea[name=contents]').select(); return false; } if (isNaN($(sender).find('input[name=x]').val())) { alert('Offset must be a valid number'); $(sender).find('input[name=x]').select(); return false; } if (isNaN($(sender).find('input[name=y]').val())) { alert('Offset must be a valid number'); $(sender).find('input[name=y]').select(); return false; } return true; } Image Download Application in iPhone […]

Harlan Arnold says July 4, 2013

History shows that for consumer, the first impression is the one that sticks, Microsoft is commercial first, consumer second. With the commercial market , you can roll out and then iPhone will get good users and apps.

Add Your Reply