parse.com & java script- upload image for user and show the image

Question

I build a signup form and there, there is filed for the user image

<input type="file" name="img1"   id="img1">

Now , When the user press the button "signup" I call the function signUp:

  function signUp(){

  var username = document.getElementById('username_signUp').value;     
 var password = document.getElementById('password_signUp').value;


Parse.initialize("kkbFC-----dldRYvUOywO8", "2ux4CkBgv4QB---wNguk");


 var user = new Parse.User();
 user.set("username", username);
 user.set("email", username);
 user.set("password", password);


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

  var parseFile = new Parse.File(name, file);
  parseFile.save().then(function() {
  // The file has been saved to Parse.
}, function(error) {
        alert("Error: " + error.code + " " + error.message);

  // The file either could not be read, or could not be saved to Parse.
});



user.set("image", file);

}

user.signUp(null, {
    success: function (user) {

    },
    error: function (user, error) {
    }
});  


}

The signUp complete and I get new row on parse.com. In the "image" filed I habe

{"lastModifiedDate":{"__type":"Date","iso":"2014-01-18T20:07:11.000Z"},"name":"empty-f.gif","size":2498,"type":"image/gif","webkitRelativePath":""}

I don't undersatd if it is good or not, but when I try to get the image - it seems to be undfined.

alert(profilePhoto.url); ->It show me the message "undefined"

Thanks!

ahoffer · Accepted Answer · 2014-01-19 02:28:23Z

3

//Parse's asynchronous nature causes some of hard-to-spot errors. 
//The right way to use parse is to keep nesting code into the 
//success handlers/promise handler.
function signUp(){
  var username = document.getElementById('username_signUp').value;     
  var password = document.getElementById('password_signUp').value;
  Parse.initialize("kkbFCxNGrHeUB7MpVEIRGMvZYgh0dldRYvUOywO8", "2ux4CkBgv4QBNYwlLh7RGmNQjXh7t0x7jGjwNguk");

  var user = new Parse.User();
  user.set("username", username);

  //THE NEXT LINE SETS EMAIL TO BE THE USER NAME. THAT IS MOST LIKELY A BUG
  user.set("email", username);
  //-----------------------------------------------------------------------

  user.set("password", password);

  var fileUploadControl = $("#img1")[0];

  if (fileUploadControl.files.length > 0) {
    var file = fileUploadControl.files[0];
    var name = "photo.png";
    var parseFile = new Parse.File(name, file);
    parseFile.save().then(function(parseFile) {
      // The file has been saved to Parse. file's URL is only available 
      //after you save the file or after you get the file from a Parse.Object.
      //Get the function url() on the Parse.File object.
      var url = parseFile.url();
      user.set("image", url);
      user.signUp();
      }, 
      function(error) {
        // The file either could not be read, or could not be saved to Parse.
        alert("Error: " + error.code + " " + error.message);
      });
  };
};

answered Jan 19, 2014 at 2:28

ahoffer

6,5984 gold badges42 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ahoffer Over a year ago

I haven't tested it. It it doesn't work, let me know.

Collectives™ on Stack Overflow

parse.com & java script- upload image for user and show the image

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related