Storing and retrieving images from parse

I’m trying to create an app that allows users to select a profile picture from their gallery and upload it to parse. I’m having trouble figuring out how to get the image to get saved on the parse backend. Also, once the image has been saved to parse, how do I retrieve it and display it in my Ionic app. Any help will be appreciated. Thank you very much.

I’ve been struggling with this for a couple weeks as well. Here is what I have so far, maybe we can work together to figure it out. I’m using AngularJS to interact with Parse’s Rest API.

Note that you can’t upload a photo (or any file) directly into a Parse Class programmatically, it has to be uploaded as a File (which cannot be browsed in Parse’s Data Browser), and then you create a reference object in your Class that links with the uploaded file (you then reference that object to display it in your app.) The photo also has to be turned into a Base64 string before it can be uploaded.

Here’s the inside of my controller that’s supposed to take the Photo, turn the photo into a base64 string, upload the photo file, create a reference object and upload that reference object (except it doesn’t work):

 $scope.takePicture = function () {

        // Object to save to Parse that includes an image
        $scope.listingImageObject = {
            text: "",
            image: null,
        };

        var options = {
            quality: 75,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            encodingType: Camera.EncodingType.JPEG,
            allowEdit: true,
            targetWidth: 300,
            targetHeight: 300,
            saveToPhotoAlbum: false
        };

        $cordovaCamera.getPicture(options).then(function (imageData) {
            //Retrieve Image URI so that the photo can be previewed in the app
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
            // Turn image into base64 string so that it can be uploaded to Parse
            $scope.dataToSubmit = {__ContentType: "image/jpeg", base64: imageData};
        }, function (err) {
            // An error occurred. Show a message to the user
            alert("Error taking picture: " + err);
        })
    };

    $scope.listing = {};

    // Function to upload the image via createImage service
    $scope.createImage = function () {
        Listings.createImage({
          listingImage: $scope.listing.dataToSubmit
        }).success(function (data) {
            alert("Your image has been submitted!");
            createImageObject(result.data);
        });
    };

    // Function to associate the uploaded image with a reference object, and upload that to Parse via createImageObject service
    $scope.createImageObject = function () {
        listingImageObject.image = {name: "image.jpg", __type: "File"};
        Listings.createImageObject({
           listingImageObject: $scope.listing.listingImageObject
        }).success(function (data) {
            alert("Your image object has been submitted!");
        });
    };

And here are the services that conduct the upload to Parse:

createImageObject:function(data){
        return $http.post('https://api.parse.com/1/classes/Listings',data,{
            headers:{
                'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                'Content-Type':'application/json'
            }
        });
    },
    createImage:function(data){
        return $http.post('https://api.parse.com/1/files/image.jpg',data,{
            headers:{
                'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                "Content-Type": 'plain/text'
            }
        });
    },

The front end HTML uses ng-clicks to trigger each of the above controller functions. Note that the content type for uploading the photo is plain/text.

Below are some examples I found, but can’t get to work: https://asherson.wordpress.com/2015/05/31/uploading-a-base64-image-to-parse-with-the-rest-api-using-angular-js/

And another example by aaronksaunders that I’ve yet to be able to extrapolate working snippets from: https://github.com/aaronksaunders/dcww

Getting the photos up into Parse is the hard part, getting them back down would just need a “get” serivce and a controller that displays what is queried. Best of luck figuring it out! Let me know if you get it working.

Hello @victorolowe @futurekid did you manage to solve it? I’m struggling with this issue as well and I can’t figure it out!