title: Save Images In Parse using JavaScript
body: <p>I am able to store strings, and numbers in Parse, but I am experiencing issues storing images in Parse.</p>
  
  <p>Essentially, a user selects an image from their gallery and that image is inserted inside an image with an id such as:</p>
  
  <pre><code>        &lt;img src="content/profilef.png" id="profilePic1" /&gt;
          &lt;img src="content/profile.png" id="profilePic2" /&gt;
  
          &lt;img src="content/profileu.png" id="profilePic3" /&gt;
  </code></pre>
  
  <p>This is what I am trying to grab and store into Parse, I have already create 3 files column in parse.</p>
  
  <p>This is my JavaScript code, everything works beside the images I am trying to store:</p>
  
  <pre><code>function accountCreation(event){
      event.preventDefault();
      var bio = document.getElementById("profileDescription").value;
      var city = document.getElementById("selectCity").value;
      var men = document.getElementById("selectMen").checked;
      var women = document.getElementById("selectWomen").checked;
  
         var profilePic1 = document.getElementById("profilePic1").value;
  
                              var profilePic2 = document.getElementById("profilePic2").value;
                              var profilePic3 = document.getElementById("profilePic3").value;
  
  
  
  
  
      var user = Parse.User.current();
          user.set("profilePic1", profilePic1);
          user.set("profilePic2", profilePic2);
          user.set("profilePic3", profilePic3);
  
      user.set("bio", bio);
      user.set("city", city);
      user.set("menPreference", men);
      user.set("womenPreference", women);
  
      user.save(null, {
          success: function(user) {
              alert("succesfully stored");
          },
  
          error: function(user, error) {
              alert('error' + error.message);
          }
      });
  }
  </code></pre>
  
  <p>Thanks in advance,</p>
  
  <p><strong>Update:</strong>
  Because I am working with Intel XDK (or phonegap), I cannot use php locally, so I had to host the php code on the cloud., below is the error i get</p>
  
  <pre><code>Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
  
   failed to create file, src= content/profilef.png, encoded img=
  accountCreation.js:56 failed to create file, src= content/profile.png, encoded img=
  accountCreation.js:56 failed to create file, src= content/profileu.png, encoded img=
  </code></pre>
  
  <p>the script</p>
  
  <pre><code>$(function() {
  
      //Initialize Parse below by using credentials provided for App on Parse 
  Parse.initialize("ID", "ID");
  
  // click handlers
      // this watches for clicks to save user data 
      $('#accountCreation').click(function(event){
          event.preventDefault(); // only needed if the clicked element is a link
          accountCreation();
      })
  
  
  
  
      function accountCreation(){
              $('#container').hide(); // hide the display while we save the info as it will take a few seconds, you should do a loading bar or something here instead
  
              var user = Parse.User.current(); // get the currently logged in user object
              var bio = $('#profileDescription').val();
              var city = $('#selectCity').val();
              var men = $('#selectMen').is(':checked'); // returns true or false
              var women = $('#selectWomen').is(':checked'); // returns true or false
  
              // $('.images') retruns an array of elements with the class name "images"
              // loop through each image element
              $('.images').each(function(index, element) {
                    // first we'll need to get the image source 
                    var src = $(element).attr('src');
                    // alone, the source is just a url and not of much use to us
                    // we'll need to take the source and create a base64 encoded string from it
                    // we'll use an ajax call to a small php script to do this
                    var encodedImg;
                    try {
                      $.ajax({
                         type: "POST",
                         url: "http://addo-env.elasticbeanstalk.com/aws/encodeImgToBase64.php", // you may need to adjust this path depending on where you store the file in relation to this file
                         data: 'url='+src,
                         success: function(data){
                           encodedImg = data; // encodedImg is now a base64 encoded string 
                         },
                         async: false 
                         // note the use of `async: false` here
                         // normally the ajax call would run asynchronously in the background  
                         // and the below code would be run immediately, even before the ajax call has finished 
                         // `async: false` stops execution here and forces the ajax call to finish before any other code is run 
                         // this isnt normally a great way to do this since it locks up the page while the funcion is working
                         // but, honestly, this is a save function and its pretty standard for other features on a page to be unavailable while saving data
                         // that said, this could be written better with `promises` but it works as is
                       });
                      var file = new Parse.File("photo.jpg", { base64: encodedImg }); // this part actually saves the image file to parse
                      // From the Docs: Notice in this example that we give the file a name of photo.jpg. You don't need to worry about filename collisions. 
                      // Each upload gets a unique identifier so there's no problem with uploading multiple files named photo.jpg.
                      user.set("image"+index,file); // set this image to the corosponding column on our object 
                    } catch (e) {
                      console.log('failed to create file, src= '+src+', encoded img='+encodedImg)
                    }
              });
              user.set("bio", bio);
              user.set("city", city);
              user.set("menPreference", men);
              user.set("womenPreference", women);
              // save our new 
              user.save(null,{
                success: function(user) { 
                    $('#message').html('Profile Updated!');
                    $('#container').show(); // show the screen again, you should just remove your loading bar now if you used one
                },
                error: function(user, error) {
                    console.log('Failed to create new object, with error code: ' + error.message);
                }
              });
       }
  </code></pre>
  
  <p>Update 2:</p>
  
  <pre><code>&lt;?php
  header('Access-Control-Allow-Origin: *');
  if (isset($_POST['url']) ){
      echo base64_encode(file_get_contents($_POST['url']));
  }else{
      echo 'Error: No image to encode';
  }
  ?&gt;
  </code></pre>
  
  <p>This is the PHP code above, it has header access-control allow to allow cross-domain access, without the header, i would get an error. It hosted on aws, and there is the link:</p>
  
  <p><a href="http://addo-env.elasticbeanstalk.com/aws/encodeImgToBase64.php" rel="nofollow">http://addo-env.elasticbeanstalk.com/aws/encodeImgToBase64.php</a></p>
  
  <p>I cant store it locally because php won't work with phonegap or intel xdk so have to host it on the cloud</p>