Error: The 'then' method cannot be invoked on an undefined object in the Parse.File.save function

Question

Error: The 'then' method cannot be invoked on an undefined object in the Parse.File.save function

I am currently utilizing the Javascript API for parse.com within an Angular JS application. My goal is to successfully save or update the user's profile picture. Below is the code snippet that I have been working with:

Some HTML . . .

<input type="file" capture="camera" accept="image/*" id="profilePhotoFileUpload">

Credit goes to Google I/O, Raymond, and the Parse JS guide.

Here is the controller code snippet:

$scope.updateUserProfile = function (user) {

        var fileUploadControl = $("#profilePhotoFileUpload")[0];
        if (fileUploadControl.files.length > 0) {
            var file = fileUploadControl.files[0];
            var name = "photo.jpg";

            var parseFile = new Parse.File(name, file);

            parseFile.save();


}

An error keeps popping up:

TypeError: Cannot call method 'then' of undefined at Object.Parse.File.save (parse-1.2.8.js:4084:43)

It occurs when trying to execute parseFile.save()

Essentially, the _source is appearing as undefined . . . Any ideas why?

Thank you!

javascript angularjs parse-platform promise

Answer 1

Answer №1

After working around it, I finally achieved my ultimate goal of using it with phonegap, thanks to the information provided in this post by Raymond Camden!

Here is a snippet of the code:

window.resolveLocalFileSystemURI(data, function(entry) {

    var reader = new FileReader();

    reader.onloadend = function(evt) {
        var byteArray = new Uint8Array(evt.target.result);
        var output = new Array( byteArray.length );
        var i = 0;
        var n = output.length;
        while( i < n ) {
            output[i] = byteArray[i];
            i++;
        }                
        var parseFile = new Parse.File("mypic.jpg", output);

        parseFile.save().then(function(ob) {
                navigator.notification.alert("Got it!", null);
                console.log(JSON.stringify(ob));
            }, function(error) {
                console.log("Error");
                console.log(error);
            });

    }

    reader.onerror = function(evt) {
          console.log('read error');
          console.log(JSON.stringify(evt));
      }

    entry.file(function(s) {
        reader.readAsArrayBuffer(s);
    }, function(e) {
        console.log('ee');
    });

});

}

Answer 2

After working around it, I finally achieved my ultimate goal of using it with phonegap, thanks to the information provided in this post by Raymond Camden!

Here is a snippet of the code:

window.resolveLocalFileSystemURI(data, function(entry) {

    var reader = new FileReader();

    reader.onloadend = function(evt) {
        var byteArray = new Uint8Array(evt.target.result);
        var output = new Array( byteArray.length );
        var i = 0;
        var n = output.length;
        while( i < n ) {
            output[i] = byteArray[i];
            i++;
        }                
        var parseFile = new Parse.File("mypic.jpg", output);

        parseFile.save().then(function(ob) {
                navigator.notification.alert("Got it!", null);
                console.log(JSON.stringify(ob));
            }, function(error) {
                console.log("Error");
                console.log(error);
            });

    }

    reader.onerror = function(evt) {
          console.log('read error');
          console.log(JSON.stringify(evt));
      }

    entry.file(function(s) {
        reader.readAsArrayBuffer(s);
    }, function(e) {
        console.log('ee');
    });

});

}

Answer 3

Answer №2

For those working with Phonegap and Parse, Raymond Camden offers a helpful example for taking pictures:

http://www.raymondcamden.com/2013/07/23/better-example-of-phonegap-parse-and-uploading-fi...

var imagedata = "";    

$("#takePicBtn").on("click", function(e) {
    e.preventDefault();
    navigator.camera.getPicture(gotPic, failHandler, 
        {quality:50, destinationType:navigator.camera.DestinationType.DATA_URL,
         sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY});
});

function gotPic(data) {
    console.log('got here');
    imagedata = data;
    $("#takePicBtn").text("Picture Taken!").button("refresh");
}

The image is saved as follows:

var parseFile = new Parse.File("mypic.jpg", {base64:imagedata});
        console.log(parseFile);
            parseFile.save().then(function() {
                var note = new NoteOb();
                note.set("text",noteText);
                note.set("picture",parseFile);
                note.save(null, {
                    success:function(ob) {
                        $.mobile.changePage("#home");
                    }, error:function(e) {
                        console.log("Oh crap", e);
                    }
                });
                cleanUp();
            }, function(error) {
                console.log("Error");
                console.log(error);
            });

Pay attention to {base64:imagedata}, which is essential for creating the parse file using string data.

Answer 4

For those working with Phonegap and Parse, Raymond Camden offers a helpful example for taking pictures:

http://www.raymondcamden.com/2013/07/23/better-example-of-phonegap-parse-and-uploading-fi...

var imagedata = "";    

$("#takePicBtn").on("click", function(e) {
    e.preventDefault();
    navigator.camera.getPicture(gotPic, failHandler, 
        {quality:50, destinationType:navigator.camera.DestinationType.DATA_URL,
         sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY});
});

function gotPic(data) {
    console.log('got here');
    imagedata = data;
    $("#takePicBtn").text("Picture Taken!").button("refresh");
}

The image is saved as follows:

var parseFile = new Parse.File("mypic.jpg", {base64:imagedata});
        console.log(parseFile);
            parseFile.save().then(function() {
                var note = new NoteOb();
                note.set("text",noteText);
                note.set("picture",parseFile);
                note.save(null, {
                    success:function(ob) {
                        $.mobile.changePage("#home");
                    }, error:function(e) {
                        console.log("Oh crap", e);
                    }
                });
                cleanUp();
            }, function(error) {
                console.log("Error");
                console.log(error);
            });

Pay attention to {base64:imagedata}, which is essential for creating the parse file using string data.

Error: The 'then' method cannot be invoked on an undefined object in the Parse.File.save function

Answer №1

Answer №2

Similar questions

Getting the Promise Result from an AngularJS Service back to the Controller

Is it possible to utilize a CSV file to dictate which images should be utilized on my website as a guide?

There seems to be a problem with the output when trying to display the message "You said ${reply}"

The system is unable to locate a compatible object with the identifier '[object Object]' of type 'object'. NgFor is limited to binding with iterables like Arrays, not JSON data

What do you notice about interactions involving 'input type=text' in HTML and JavaScript?

How can a functional component be created in VueJS using x-templates?

The jQuery plugin functions smoothly when running on localhost, but it causes issues with the background image when deployed on the web

What is the secret to creating a button that can sort text and another button that flips the word density in my content?

Angular threw an error stating that it encountered an unexpected token 'var' when trying to declare a variable x as

Trouble with refreshing view - angular, firebase

Unusual host value being returned by next/headers in Next.js version 13

Leveraging PHP JSON responses for decision-making in jQuery/JavaScript

Convert JSON response date format to a format specified by the user

Steps for launching a browser using Capybara and Selenium

Utilize the key-value pair from ng-repeat to expand the scope of the expression

Having trouble setting up jQuery UI Datepicker in my system

ES6 Conditional Import and Export: Leveraging the Power of Conditional

Using ThreeJS to project a mouse click onto the XZ plane

Can the garbage collector in Typescript/JavaScript effectively handle circular references, or does it result in memory leaks?

Invisible enigmatic anomaly detected on non-existent line within the realm of Node.js