Saving Images to Parse using Javascript for a Website

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 });{
      success: function(file) {
        alert('File saved, now saving product with file reference...');

        // to fill the columns 
        gameScore.set("picture", file);, {
          success: function(gameScore) {
            // Execute any logic that should take place after the object is saved.
            alert('New object created with objectId: ' +;
          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);



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.


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


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

        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":,"url": data.url,"__type": "File"}}); //save it's name and url in a json object for good measure
   ; //save and push the changes

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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.