Saving Images to Parse using Javascript for a Website

Question

Ok, so I'm trying to figure out how to save images to Parse using Parse.Files, and then be able to retrieve the images later as well. Right now, whenever I load the page, a new Parse object is automatically created, but with the incorrect file.

What I want, is to be able to choose an image from file using an input field, upload it after clicking the upload button, and then be able to retrieve it later as well, again probably with some sort of button. I'm not sure where to really go from here, so any help is appreciated!!!

Code for my Buttons

    <input type="file" class="imageFile" id="imageFile"/>
    <input type="button" onclick="uploadImage()" class="uploadBtn" value="Upload Image" id="upload"/>

Javascript Code

    <script type="text/javascript">
    Parse.initialize("key", "key");
    var GameScore = Parse.Object.extend("GameScore");
    var gameScore = new GameScore();
    function uploadImage() {
    //var images = Parse.Object.extend("images");

    var base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=";
    var file = new Parse.File("player1.png", { base64: base64 });

    file.save({
      success: function(file) {
        alert('File saved, now saving product with file reference...');

        // to fill the columns 
        gameScore.set("picture", file);

        gameScore.save(null, {
          success: function(gameScore) {
            // Execute any logic that should take place after the object is saved.
            gameScore.save();
            alert('New object created with objectId: ' + gameScore.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);
      }
    });
    }
    </script>

bwalshy · Accepted Answer · 2015-08-12 05:50:03Z

This took me forever to get when I was using Parse for a web app. What worked for me is using ajax. In the code below, we're getting the image from the input element and essentially storing it in a variable. Then we're using ajax (through Parse's REST API) to send the image to Parse. Then we're making a new object where the image is stored (a table). Then we're creating a cell that contains the URL where we can access the image and then we're creating another cell that contains the name and url of the image, just to be safe and have another means of getting the image.

Html:

<input type="file" class="imageFile" id="imageFile" accept="image/*">

JS:

/*Get image file given by user*/
var file;
var name;
$('#imageFile').bind("change", function (e) {
    var files = e.target.files || e.dataTransfer.files;
    // Our file var now holds the selected file
    file = files[0];
    name = file.name;
});
function uploadImage() {
    if (file != null) {
    var serverUrl = 'https://api.parse.com/1/files/' + file.name;

    $.ajax({
        type: "POST",
        beforeSend: function (request) {
            request.setRequestHeader("X-Parse-Application-Id", 'your app id');
            request.setRequestHeader("X-Parse-REST-API-Key", 'your rest key');
            request.setRequestHeader("Content-Type", file.type);
        },
        url: serverUrl,
        data: file,
        processData: false,
        contentType: false,
        success: function (data) {

             var myimage = new Parse.Object("image_table"); //create new object
             myimage.set({imageurl: data.url}); //set the url that will be used to retrieve the image
             myimage.set({imagefile: {"name": data.name,"url": data.url,"__type": "File"}}); //save it's name and url in a json object for good measure
             myimage.save(); //save and push the changes

        },
        error: function (data) {
            var obj = jQuery.parseJSON(data);
            alert(obj.error);
        }
    });
  }
}

Collectives™ on Stack Overflow

Saving Images to Parse using Javascript for a Website

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related