I am able to store strings, and numbers in Parse, but I am experiencing issues storing images in Parse.
Essentially, a user selects an image from their gallery and that image is inserted inside an image with an id such as:
<img src="content/profilef.png" id="profilePic1" />
<img src="content/profile.png" id="profilePic2" />
<img src="content/profileu.png" id="profilePic3" />
This is what I am trying to grab and store into Parse, I have already create 3 files column in parse.
This is my JavaScript code, everything works beside the images I am trying to store:
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);
}
});
}
Thanks in advance,
Update: 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
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=
the script
$(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);
}
});
}
Update 2:
<?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';
}
?>
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:
http://addo-env.elasticbeanstalk.com/aws/encodeImgToBase64.php
I cant store it locally because php won't work with phonegap or intel xdk so have to host it on the cloud
