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">

Answer 1

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();
   }

Answer 2

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);
    }
});