Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Tutorial: Uploading an Image from the Gallery

Tutorial: Uploading an Image from the Device Gallery

In this article, you will learn how to use the SDK methods to upload an image file to Telerik Platform, then acquire its download URL from Telerik Platform and finally display it on the device's screen.

The examples in this section assume that you are in the context of an iOS App and that you have basic familiarity with native iOS development.

Steps at a glance:

  1. Download and Add the SDK to Your Project
  2. Prepare the App UI
  3. Add an Image Picker to the App
  4. Start a Method to Handle the Picked Image
  5. Upload and Display the Image
  6. Run the App

Prerequisites

  • A Telerik Platform account.
  • The App ID for your Telerik Platform app. You can access it from Settings.
  • The Data service enabled.

Download and Add the SDK to Your Project

  1. Log in to your Telerik Platform account and click Getting Started > Downloads in the top right corner.
  2. Under Download SDKs & Tools click Backend Services to see a list of available downloads.
  3. Follow the instructions on the page to download a ZIP archive containing the iOS SDK to your local machine.

    Downloads overview image

  4. Unzip the archive and add EverliveSDK.framework to your project.

  5. Add the following statements to reference the SDK:

    #import <EverliveSDK/EverliveSDK.h>
    

    If you are working in a Swift project you need to add a bridging header to your project from Xcode by choosing File > New > File > iOS > Source > Header. Then add the statement above to the header. Register the bridging header under Build Settings > Swift Compiler > Code Generation with the relative path to the header, for example MyBridgingHeader.h.

  6. Set your App ID as a constant in your app's view controller:

static NSString * const AppId = @"your-app-id";
let AppId:String = "your-app-id";

Prepare the App UI

After configuring the project it is time to build a simple UI for your app. Create an UIButton and a UIImageView in your app's storyboard. The following code connects those elements to your app's view controller:

 // in your controller's header file
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
- (IBAction)pickImageAction:(id)sender;
@IBOutlet var imageView: UIImageView!

@IBAction func pickImageAction(sender: UIButton) {
}

Add an Image Picker to the App

Before you can upload an image, you need to acquire it.

To enable the usage of an image picker you need to declare that your view controller uses the UINavigationControllerDelegate and UIImagePickerControllerDelegate delegates:

@interface ViewController : UIViewController<UINavigationControllerDelegate, UIImagePickerControllerDelegate>
class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate

Then you need to implement the pickImageAction method that is executed when the button is tapped. It allows the user to pick an image from the image gallery:

// in the implementation (.m) file of your app's controller 
- (IBAction)pickImageAction:(id)sender {
    UIImagePickerController *imagePickerController = [[UIImagePickerController alloc] init];
    imagePickerController.delegate = self;
    imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    imagePickerController.allowsEditing = false;

    [self presentViewController:imagePickerController animated:true completion:nil];
}
@IBAction func pickImageAction(sender: UIButton) {
    var imagePickerController = UIImagePickerController()
    imagePickerController.delegate = self;
    imagePickerController.sourceType = UIImagePickerControllerSourceType.PhotoLibrary;
    imagePickerController.allowsEditing = false

    self.presentViewController(imagePickerController, animated: true, completion: nil)
}

Start a Method to Handle the Picked Image

In your app's view controller, implement the didFinishPickingImage method of the UIImagePickerController protocol by adding the following method declaration:

-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    [self dismissViewControllerAnimated:true completion:nil];
}
func imagePickerController(picker: UIImagePickerController!, didFinishPickingImage image: UIImage!, editingInfo: [NSObject : AnyObject]!) {
    self.dismissViewControllerAnimated(true, completion: nil)    
}

Upload and Display the Image

You are finally ready to write the code that will upload the image to Telerik Platform, then download it and display it on the screen.

All steps below require you to add the specified code in the didFinishPickingImage method's body.

  1. Initialize the Everlive instance:

    The Everlive object connects the client app to a Telerik Platform app.

    [Everlive setApplicationKey:@"your-app-id"];
    
    Everlive.setApplicationKey("your-app-id")
    

    By default all server requests are transmitted over HTTP. To use HTTPS, set the UseHTTPS key to true in your .plist file or in the Custom iOS Target Properties.

  2. Prepare the image for upload:

    Before you can upload a file, you need to set a number of file properties such as content type and file name. Add these lines after the initialization of the Everlive instance to prepare the received image for upload:

    UIImage *myImage = [info objectForKey:UIImagePickerControllerOriginalImage];
    
    NSString* fileName = @"myImage";
    NSData* data = UIImagePNGRepresentation(myImage);
    
    EVFile *file = [EVFile fileWithName:fileName data:data contentType:nil];
    
    var imageName:String = "myImage";
    var imageData = UIImagePNGRepresentation(image)
    
    var file:EVFile = EVFile()
    file.filename = imageName
    file.data = imageData
    file.contentType = nil // the SDK will set the type for images behind the scenes
    
  3. Implement the file upload part:

    Use the static save method of the EVFile class to upload the image to your Telerik Platform app. As a result you get the ID of the uploaded file that you will need later for downloading and displaying the file:

    [file save:^(BOOL success, NSError *error) {
        if (success) {
            // access the uploaded file's metadata here
            NSString *fileId = file.id;
    
            NSLog(@"Success! File uploaded with Id: %@", file.id);        
        } else {
            NSLog(@"Unfortunately an error occurred: %@", error.domain);
        }
    }];
    
    file.save { (result:Bool, error:NSError!) -> Void in
        if(result) {
            // access the uploaded file's metadata here
            var fileId:String = file.id;
    
            println("Success! File uploaded with Id: " + file.id);        
        } else {
            println("Failed to upload image: " + error.domain)
        }
    }
    
  4. Implement the file download part:

    With the file Id at your disposal, you can download the image from Telerik Platform and display it in the UIImageView element.

    Add the following lines in the success branch of the save block from the previous step:

    [EVFile file:fileId block:^(EVFile *result, NSError *error) {
        if(error == nil)
            self.imageView.image = [UIImage imageWithData:result.data];
        else {
            NSLog(@"Failed to fetch the image: %@", error.domain);
        }
    }];
    
    EVFile.file(fileId) { (file:EVFile!, error:NSError!) -> Void in
        if(error == nil) {
            var downloadedImage = UIImage(data: file.data);
            self.imageView.image = downloadedImage;
        } else {
            println("Failed to fetch the image: " + error.domain)
        }
    }
    

Run the App

Now you are ready to run the app on a physical device or in the simulator.

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.