I am creating a function on my website where a user can login to their Facebook account so that their profile picture can be uploaded onto my server via Blueimp's jQuery file upload plugin. Initially, I set up the Facebook API through https://developers.facebook.com/docs/javascript/quickstart. I then retrieve their profile picture through the Facebook API method:
FB.api('/me/picture?type=normal', function(response) {
var facebookProfilePicUrl = response['data']['url'];
}
With this URL, I need to upload the image from the URL to my backend for processing. How is this done? I've done some research and ran into someone who had a similar problem. Blueimp File Upload: add image from URL. I attempted the answer's method and converted the image's URL to base64 through the asker's sample code The easy way to convert an URL Image to Base64 or Blob in Javascript/Jquery. However, when I attempt to convert the base64 string into a Blob object via atob(dataUrl), I receive the error: Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. I've also attempted other people's method of converting an image URL into a base64 string from StackOverflow and I still can't execute atob(dataUrl) on the returned base64 string. Is there a simpler way to do what I am trying to achieve? And if not, why am I receiving this error? I apologize for poor question formatting.
