mardambey/fb-upload.html

## fb-upload.html

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<form>
	<input type="file" accept="image/*" id="capture" capture="camera">
	<img id="blah" src="#" alt="your image"/>
</form>

<script type="text/javascript">

// TODO: these need to be set
userId = 0;
authToken = "";

if ( XMLHttpRequest.prototype.sendAsBinary === undefined ) {
	XMLHttpRequest.prototype.sendAsBinary = function(string) {
		var bytes = Array.prototype.map.call(string, function(c) { return c.charCodeAt(0) & 0xff; });
		this.send(new Uint8Array(bytes).buffer);
	};
}

// This function takes an array of bytes that are the actual contents of the image file.
// In other words, if you were to look at the contents of imageData as characters, they'd
// look like the contents of a PNG or GIF or what have you.  For instance, you might use
// pnglib.js to generate a PNG and then upload it to Facebook, all from the client.
//
// Arguments:
//   authToken - the user's auth token, usually from something like authResponse.accessToken
//   filename - the filename you'd like the uploaded file to have
//   mimeType - the mime type of the file, eg: image/png
//   imageData - an array of bytes containing the image file contents
//   message - an optional message you'd like associated with the image

function PostImageToFacebook( authToken, filename, mimeType, imageData, message, albumId )
{
	// this is the multipart/form-data boundary we'll use
	var boundary = '----ThisIsTheBoundary1234567890';

	if (!albumId) {
		albumId = "me";
	}

	// let's encode our image file, which is contained in the var
	var formData = '--' + boundary + '\r\n';
	formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
	formData += 'Content-Type: ' + mimeType + '\r\n\r\n';

	for ( var i = 0; i < imageData.length; ++i )
		formData += String.fromCharCode( imageData[ i ] & 0xff );

	formData += '\r\n';
	formData += '--' + boundary + '\r\n';
	formData += 'Content-Disposition: form-data; name="message"\r\n\r\n';
	formData += message + '\r\n';
	formData += '--' + boundary + '--\r\n';

	var xhr = new XMLHttpRequest();
	var fbUrl = 'https://graph.facebook.com/v2.3/' + albumId + '/photos?access_token=' + authToken;

	xhr.open( 'POST', fbUrl, true );
	xhr.onload = xhr.onerror = function() {
		console.log( xhr.responseText );
	};

	xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );
	xhr.sendAsBinary( formData );
}

function readURL(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();

		reader.onload = function (e) {
			$('#blah').attr('src', e.target.result);
			var canvas = document.createElement("canvas");
			var img = document.getElementById("blah");
			canvas.width = img.width;
			canvas.height = img.height;
			var ctx = canvas.getContext("2d");
			ctx.drawImage(img,0,0);
			var c = canvas.toDataURL('image/png');
			var encodedPng = c.substring(c.indexOf(',')+1,c.length);
			var decodedPng = Base64Binary.decode(encodedPng);
			PostImageToFacebook(authToken, "testfile.png", "image/png", decodedPng, "test upload");
		}

		reader.readAsDataURL(input.files[0]);
	}
}

$("#capture").change(function(){ readURL(this); });

/*
   Copyright (c) 2011, Daniel Guerrero
   All rights reserved.

   Redistribution and use in source and binary forms, with or without
   modification, are permitted provided that the following conditions are met:
 * Redistributions of source code must retain the above copyright
 notice, this list of conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright
 notice, this list of conditions and the following disclaimer in the
 documentation and/or other materials provided with the distribution.

 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 DISCLAIMED. IN NO EVENT SHALL DANIEL GUERRERO BE LIABLE FOR ANY
 DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/**
 * Uses the new array typed in javascript to binary base64 encode/decode
 * at the moment just decodes a binary base64 encoded
 * into either an ArrayBuffer (decodeArrayBuffer)
 * or into an Uint8Array (decode)
 *
 * References:
 * https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer
 * https://developer.mozilla.org/en/JavaScript_typed_arrays/Uint8Array
 */

var Base64Binary = {
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

	  /* will return a  Uint8Array type */
	  decodeArrayBuffer: function(input) {
		  var bytes = (input.length/4) * 3;
		  var ab = new ArrayBuffer(bytes);
		  this.decode(input, ab);

		  return ab;
	  },

decode: function(input, arrayBuffer) {
		//get last chars to see if are valid
		var lkey1 = this._keyStr.indexOf(input.charAt(input.length-1));
		var lkey2 = this._keyStr.indexOf(input.charAt(input.length-2));

		var bytes = (input.length/4) * 3;
		if (lkey1 == 64) bytes--; //padding chars, so skip
		if (lkey2 == 64) bytes--; //padding chars, so skip

		var uarray;
		var chr1, chr2, chr3;
		var enc1, enc2, enc3, enc4;
		var i = 0;
		var j = 0;

		if (arrayBuffer)
			uarray = new Uint8Array(arrayBuffer);
		else
			uarray = new Uint8Array(bytes);

		input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

		for (i=0; i<bytes; i+=3) {
			//get the 3 octects in 4 ascii chars
			enc1 = this._keyStr.indexOf(input.charAt(j++));
			enc2 = this._keyStr.indexOf(input.charAt(j++));
			enc3 = this._keyStr.indexOf(input.charAt(j++));
			enc4 = this._keyStr.indexOf(input.charAt(j++));

			chr1 = (enc1 << 2) | (enc2 >> 4);
			chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
			chr3 = ((enc3 & 3) << 6) | enc4;

			uarray[i] = chr1;
			if (enc3 != 64) uarray[i+1] = chr2;
			if (enc4 != 64) uarray[i+2] = chr3;
		}

		return uarray;
	}
}
</script>
</body>
</html>

	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	</head>
	<body>
	<form>
	<input type="file" accept="image/*" id="capture" capture="camera">
	<img id="blah" src="#" alt="your image"/>
	</form>

	<script type="text/javascript">

	// TODO: these need to be set
	userId = 0;
	authToken = "";

	if ( XMLHttpRequest.prototype.sendAsBinary === undefined ) {
	XMLHttpRequest.prototype.sendAsBinary = function(string) {
	var bytes = Array.prototype.map.call(string, function(c) { return c.charCodeAt(0) & 0xff; });
	this.send(new Uint8Array(bytes).buffer);
	};
	}

	// This function takes an array of bytes that are the actual contents of the image file.
	// In other words, if you were to look at the contents of imageData as characters, they'd
	// look like the contents of a PNG or GIF or what have you. For instance, you might use
	// pnglib.js to generate a PNG and then upload it to Facebook, all from the client.
	//
	// Arguments:
	// authToken - the user's auth token, usually from something like authResponse.accessToken
	// filename - the filename you'd like the uploaded file to have
	// mimeType - the mime type of the file, eg: image/png
	// imageData - an array of bytes containing the image file contents
	// message - an optional message you'd like associated with the image

	function PostImageToFacebook( authToken, filename, mimeType, imageData, message, albumId )
	{
	// this is the multipart/form-data boundary we'll use
	var boundary = '----ThisIsTheBoundary1234567890';

	if (!albumId) {
	albumId = "me";
	}

	// let's encode our image file, which is contained in the var
	var formData = '--' + boundary + '\r\n';
	formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
	formData += 'Content-Type: ' + mimeType + '\r\n\r\n';

	for ( var i = 0; i < imageData.length; ++i )
	formData += String.fromCharCode( imageData[ i ] & 0xff );

	formData += '\r\n';
	formData += '--' + boundary + '\r\n';
	formData += 'Content-Disposition: form-data; name="message"\r\n\r\n';
	formData += message + '\r\n';
	formData += '--' + boundary + '--\r\n';

	var xhr = new XMLHttpRequest();
	var fbUrl = 'https://graph.facebook.com/v2.3/' + albumId + '/photos?access_token=' + authToken;

	xhr.open( 'POST', fbUrl, true );
	xhr.onload = xhr.onerror = function() {
	console.log( xhr.responseText );
	};

	xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );
	xhr.sendAsBinary( formData );
	}

	function readURL(input) {
	if (input.files && input.files[0]) {
	var reader = new FileReader();

	reader.onload = function (e) {
	$('#blah').attr('src', e.target.result);
	var canvas = document.createElement("canvas");
	var img = document.getElementById("blah");
	canvas.width = img.width;
	canvas.height = img.height;
	var ctx = canvas.getContext("2d");
	ctx.drawImage(img,0,0);
	var c = canvas.toDataURL('image/png');
	var encodedPng = c.substring(c.indexOf(',')+1,c.length);
	var decodedPng = Base64Binary.decode(encodedPng);
	PostImageToFacebook(authToken, "testfile.png", "image/png", decodedPng, "test upload");
	}

	reader.readAsDataURL(input.files[0]);
	}
	}

	$("#capture").change(function(){ readURL(this); });

	/*
	Copyright (c) 2011, Daniel Guerrero
	All rights reserved.

	Redistribution and use in source and binary forms, with or without
	modification, are permitted provided that the following conditions are met:
	* Redistributions of source code must retain the above copyright
	notice, this list of conditions and the following disclaimer.
	* Redistributions in binary form must reproduce the above copyright
	notice, this list of conditions and the following disclaimer in the
	documentation and/or other materials provided with the distribution.

	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
	ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
	WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
	DISCLAIMED. IN NO EVENT SHALL DANIEL GUERRERO BE LIABLE FOR ANY
	DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
	(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
	LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
	ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
	(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
	*/

	/**
	* Uses the new array typed in javascript to binary base64 encode/decode
	* at the moment just decodes a binary base64 encoded
	* into either an ArrayBuffer (decodeArrayBuffer)
	* or into an Uint8Array (decode)
	*
	* References:
	* https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer
	* https://developer.mozilla.org/en/JavaScript_typed_arrays/Uint8Array
	*/

	var Base64Binary = {
	_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

	/* will return a Uint8Array type */
	decodeArrayBuffer: function(input) {
	var bytes = (input.length/4) * 3;
	var ab = new ArrayBuffer(bytes);
	this.decode(input, ab);

	return ab;
	},

	decode: function(input, arrayBuffer) {
	//get last chars to see if are valid
	var lkey1 = this._keyStr.indexOf(input.charAt(input.length-1));
	var lkey2 = this._keyStr.indexOf(input.charAt(input.length-2));

	var bytes = (input.length/4) * 3;
	if (lkey1 == 64) bytes--; //padding chars, so skip
	if (lkey2 == 64) bytes--; //padding chars, so skip

	var uarray;
	var chr1, chr2, chr3;
	var enc1, enc2, enc3, enc4;
	var i = 0;
	var j = 0;

	if (arrayBuffer)
	uarray = new Uint8Array(arrayBuffer);
	else
	uarray = new Uint8Array(bytes);

	input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

	for (i=0; i<bytes; i+=3) {
	//get the 3 octects in 4 ascii chars
	enc1 = this._keyStr.indexOf(input.charAt(j++));
	enc2 = this._keyStr.indexOf(input.charAt(j++));
	enc3 = this._keyStr.indexOf(input.charAt(j++));
	enc4 = this._keyStr.indexOf(input.charAt(j++));

	chr1 = (enc1 << 2) \| (enc2 >> 4);
	chr2 = ((enc2 & 15) << 4) \| (enc3 >> 2);
	chr3 = ((enc3 & 3) << 6) \| enc4;

	uarray[i] = chr1;
	if (enc3 != 64) uarray[i+1] = chr2;
	if (enc4 != 64) uarray[i+2] = chr3;
	}

	return uarray;
	}
	}
	</script>
	</body>
	</html>