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

admin管理员组

文章数量:1345469

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

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

• javascript
• image
• parse-platform

Share Follow edited May 10, 2014 at 18:28 user3602314 asked May 5, 2014 at 0:05 user3602314user3602314 11111 silver badge55 bronze badges 3

• @A.Wolff Do you have any suggestion ? – user3602314 Commented May 5, 2014 at 21:05
• @Handsomeguy Do you have any suggestion , please ? – user3602314 Commented May 5, 2014 at 21:07
• 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 Commented Dec 8, 2015 at 14:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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

本文标签： How to save an Image in Parsecom via JavaScriptStack Overflow