Sunday, September 1, 2013

Upload photo's to facebook(Web, Mobile) using javascript

It is really a hard job to find out how to upload pictures to Facebook. It took days for me to analyze and find-out how one can upload pictures to Facebook with the need of their JavaScript API. Here you go.imageData the variable used here is the base64 format of image.
try{
   blob = dataURItoBlob(imageData,mimeType);
}catch(e){console.log(e);}
var fd = new FormData();
fd.append("access_token",accessToken);
fd.append("source", blob);fd.append("message","Kiss");
try{
   $.ajax({
      url:"https://graph.facebook.com/" + <<userID received on getting user details>> + "/photos?access_token=" + <<user accessToken>>,
      type:"POST"
      data:fd,
      processData:false,
      contentType:false,
      cache:false,
      success:function(data){
         console.log("success " + data);
      },
      error:function(shr,status,data){
         console.log("error " + data + " Status " + shr.status);
      },
      complete:function(){
         console.log("Ajax Complete");
      }
   });

}catch(e){console.log(e);}

function dataURItoBlob(dataURI,mime) {
   // convert base64 to raw binary data held in a string
   // doesn't handle URLEncoded DataURIs

   var byteString = window.atob(dataURI);

   // separate out the mime component


   // write the bytes of the string to an ArrayBuffer
   //var ab = new ArrayBuffer(byteString.length);
   var ia = new Uint8Array(byteString.length);
   for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
   }

   // write the ArrayBuffer to a blob, and you're done
   var blob = new Blob([ia], { type: mime });

   return blob;
}

Dealing Bugs with Browser

You know web pages which look proper may not look perfect in Other browser.

        Consider you are developing a page and verifying in Internet Explorer 6 at all the times and make all the changes according to the browser.If you open the same page with Internet Explorer 7 you won't get the proper look which you got in Internet Explorer 6.

        The rendering of page differs based on the page. You can consider Firefox as a standard browser since it is open source and has the highest possible of being a proper browser. Develop pages according to the Firefox and the Go about with checking in other Browser. That is Baseline the page for Firefox browser and then add hack for the other browser.

Hacks


    Hacks is the better way to keep the look of the page. If you are capable of aligning the page with javascript you can proceed. But the problem is We have to verify the Browser and add the styles according to the browser.
     When you use hacks you can be able to solve the issue without much worry. Because browser based hacks helps a lot to standardize the page.

Sample Hacks:

IE 7 and lower
                  * hack : Star hack is specifying the property by prepending the * with the property. Like we can specify float:left as *float:left which can only be understood by the Internet Explorer 7 and the Below versions.
IE 6
     _hack : Underscore hack specifying the property by prepending the _with the property. Like we can specify height: auto as _height:auto which can only be understood by the internet Explorer 6.
IE8
    \0/ hack: This hack focus only on IE 8. This property specification differs from the other specifications. For Internet Explorer 8 we have to append the symbol at the end of the value. We have to specify border:none as border:none\0/.For your information it is Zero.