swiftparse-platformparse-cloud-codepfimageview

How to display an image uploaded using cloud code in PFImageView


This is my scenario:

  1. I need to save an image obtained from an url to Parse backend.
  2. Retrieve the same image from Parse backend and display it in a PFImageView in iOS.

This is what I did:

  1. Saving an image to Parse backend:

    promise = promise.then(function(){
      /* Download image */
      return Parse.Cloud.httpRequest({ 
        url: imageUrl
      });
    
    }).then(function(imageResponse){
      /* Use parse-image cloud module to get image */
      var image = new Image();
      return image.setData(imageResponse.buffer);
    
    }).then(function(image){
      /* Save image as parse file */
      var imageInBase64 = image.data().base64;
      var parseFile = new Parse.File(imageName, {base64: imageInBase64});
      return parseFile.save();
    
    }).then(function(parseFile){
      /* Set PFFile to an object */
      newEvent.set("eventImage", parseFile);
    });
    
  2. I then verified that the PFFile has been saved in the backend by clicking on the PFFile field for the related object. When I click on the file, I do not see an image but rather the following text.

    {"_ApplicationId":"xxxx","_JavaScriptKey":"xxxx","_ClientVersion":"js1.6.14","_InstallationId":"xxxx","_SessionToken":"r:xxxx"}
    
  3. Display the same image in a PFImageView:

    @IBOutlet weak var eventImage: PFImageView!
    
    if let imageFile = selectedEvent.eventImage as PFFile {
        eventImage.image = UIImage(named: "Event Image")
        eventImage.file = imageFile
        eventImage.loadInBackground()
    }
    

Unfortunately, this does not work, the PFImageView is just blank. It looks like the PFFile was downloaded based on the fact that I get the following results for imageFile.url and imageFile.name:

imageFile.url : https://files.parsetfss.com/xxxx/tfss-xxxx imageFile.name: tfss-xxxx

I am wondering if the issue here is how the image is uploaded to Parse in the cloud code. Here I am converting it to base64 and then saving the file.


Solution

  • Resolved:

    The issue was with using var imageInBase64 = image.data().base64;. My replacement cloud code is as follows:

        promise = promise.then(function(){
          /* Download image */
          return Parse.Cloud.httpRequest({ 
            url: imageUrl
          });
    
        }).then(function(imageResponse){
          /* Use parse-image cloud module to get image */
          var image = new Image();
          return image.setData(imageResponse.buffer);
    
        }).then(function(image){
          format = image.format();
          return image.data();
    
        }).then(function(buffer)){
          /* Save image as parse file */
          var imageInBase64 = buffer.toString("base64");
          var parseFile = new Parse.File(imageName + "." + format, {base64: imageInBase64});
          return parseFile.save();
    
        }).then(function(parseFile){
          /* Set PFFile to an object */
          newEvent.set("eventImage", parseFile);
        });