How to display an image uploaded using cloud code in PFImageView

Question

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.

Answer 1

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);
    });