How to save an Image in Parse.com via JavaScript?

Question

I wanna add new Object that containing an Image in one of its columns , but it dose not save My Pic , Is there any mistake in my code ? specially part of saving Image !!

My JavaScript where the problem appeared:

It never upload my pic in parse !!

    <script type="text/javascript">
    Parse.initialize("key", "key");


   var products = Parse.Object.extend("products");

    var fileUploadControl = $("#profilePhotoFileUpload")[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) {
   // The file either could not be read, or could not be saved to Parse.
 });

    </script>

Here I added html line to upload file:

<input type="file" id="profilePhotoFileUpload">

this question was edited after an answer was posted based on the code, the answer by Timothy remains correct: first save your Parse File, then (in the callback from that Promise) save your object — Sandra, Dec 08 '15 at 14:34

score 8 · Answer 1 · answered May 11 '14 at 00:43

I got the answer I am sharing it with you maybe someone get benefit

The THML line to upload file is:

<input type="file" id="pic">

The code in <script> to get and save image in parse is :

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

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

   //put this inside if {
   parseFile.save().then(function() {
   // The file has been saved to Parse.
   }, function(error) {
   // The file either could not be read, or could not be saved to Parse.
    });

    // Be sure of ur parameters name
    // prod is extend of my class in parse from this: var prod = new products();
    prod.set("picture", parseFile);
    prod.save();
   }

product save needs to be *inside* the parseFile.save result function — Sandra, Dec 08 '15 at 14:37

Timothy Walters · Answer 2 · 2014-05-09T21:32:44.120

Check the documentation here (at the end of that section, just before the one about retrieving files). Basically the issue is that like any other Parse object you need to save it first, then after the save is complete you can use it.

Create the file, save it, and in the save success handler you can then save the object with the reference to the file.

UPDATE: here's how your code above could be fixed:

Parse.initialize("key", "key");

var products = Parse.Object.extend("products");

var base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=";
var file = new Parse.File("mypic.png", { base64: base64 });
file.save({
    success: function(file) {
        alert('File saved, now saving product with file reference...');

        var prod = new products();
        // to fill the columns 
        prod.set("productID", 1337);
        prod.set("price", 10);
        //I guess it need some fixing here
        prod.set("picture", file);
        prod.set("productName", "shampoo");
        prod.set("productDescribe", "200 ml");

        prod.save(null, {
            success: function(prod) {
                // Execute any logic that should take place after the object is saved.

                alert('New object created with objectId: ' + prod.id);
            },
            error: function(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);
            }
        });
    },
    error: function(error) {
        alert('Failed to save file: ' + error.description);
    }
});

Thanks for answering but i still suffering how to do it , i followed parse,com guide but it still does not work successfully... If you have an example code I will be thank full — user3602314, May 09 '14 at 16:25
oooh I wanna edit my code but wrongly i did in ur answer to me I cannot deleted but if u can chick it to discover my mistake I will be thankful.. Its run but doesn't save any file — user3602314, May 10 '14 at 18:24
Thank you very much , I got the answer and post it here as answer , thanks for ur helpfulness @TimothyWalters — user3602314, May 11 '14 at 00:44

How to save an Image in Parse.com via JavaScript?

2 Answers2

Linked