How do I upload an image using the Parse.com JavaScript SDK?

Question

I'm using Parse.com to build a JavaScript app, and I need to upload photos. I have a form which allows users to select the image on their filesystem, but what do I do with it next? I can't find any documentation for this on the Parse site (not for the JavaScript SDK, anyway).

Brad Parks · Accepted Answer · 2014-09-12 18:29:42Z

3

Here's a quick example on how to upload an image:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  // ***************************************************
  // NOTE: Replace the following your own keys
  // ***************************************************

  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_CLIENT_ID");

  function saveJobApp(objParseFile)
  {
     var jobApplication = new Parse.Object("JobApplication");
     jobApplication.set("applicantName", "Joe Smith");
     jobApplication.set("profileImg", objParseFile);
     jobApplication.save(null, 
     {
        success: function(gameScore) {
          // Execute any logic that should take place after the object is saved.
          var photo = gameScore.get("profileImg");
          $("#profileImg")[0].src = photo.url();
        },
        error: function(gameScore, error) {
          // Execute any logic that should take place if the save fails.
          // error is a Parse.Error with an error code and description.
          alert('Failed to create new object, with error code: ' + error.description);
        }
     });
  }

  $('#profilePhotoFileUpload').bind("change", function(e) {
         var fileUploadControl = $("#profilePhotoFileUpload")[0];
         var file = fileUploadControl.files[0];
         var name = file.name; //This does *NOT* need to be a unique name
         var parseFile = new Parse.File(name, file);

         parseFile.save().then
         (
           function() 
           {
               saveJobApp(parseFile);
           }, 
           function(error) 
           {
             alert("error");
           }
         );
  }); 

});
</script>

<body>
    <input type="file" id="profilePhotoFileUpload">
    <img id="profileImg"/>
</body>

edited Sep 12, 2014 at 18:29

answered May 8, 2014 at 11:27

Brad Parks

73.3k71 gold badges297 silver badges374 bronze badges

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

2 Comments

CharlesA Over a year ago

great answer - it looks like you're downloading jQuery twice?

SuperUberDuper Over a year ago

what table does parseFile.save() save to?

Collectives™ on Stack Overflow

How do I upload an image using the Parse.com JavaScript SDK?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related