How to integrate InkFilePicker library in Web App

by
I heard many developers across the forum asking about how to integrate InkFilePicker library into their application and hence thought to give it a try. I’m sharing here the steps to get started with the library.
Formerly known as FilePicker.io, InkFilePicker is a library that allows user to connect to popular Cloud Services like Dropbox, Facebook, Google Drive, Picasa, Flickr etc. The latest offering includes SkyDrive, Github, Gmail, FTP, WebDAV and many plus. As a developer you can quickly add integrations to these cloud services with no server setup and OAuth dealings, so basically it’s a developer product. As InkFilePicker eliminates the need to code these types of integrations, it really speeds up the TTM (Time-to-Market) of the application. The latest documentation reports, the SDK is available for Web, iOS, Android and PhoneGap apps.
It empowers the application to import & store files, export files, read /write to uploaded files and even to convert them to the other size and right format.
You can try the library with a developer account; however, it prevents you from doing customizations like-adding your logo, modifying CSS rules, configuring various storage accounts to store data.
Procedure to generate API Key:
  1. Visit the Developers Registration Page: https://developers.inkfilepicker.com/register/
    OR, if you want to sign up for a regular account, then visit the pricing page > select desired package and sign up, however, you will need to enter payment credentials while signing up for regular account.
  2. As soon sign up process completes (kidding…  it just takes to enter your email address and password), welcome page appears:
  3. Okay, do you see that big green button which says “Create App” in the picture above? Yes, you’ve got it, that’s right beneath the CLOUD. In order to generate a key you’re required to have an application name registered first. You can also click “Create new Application” under “Applications” menu: 
  4. Enter Application details – name of the application and SDK’s you’re planning to use > Hit “Next Step”.
  5. On next screen, it prompts you to add your own logo if you want to display when the FilePicker pops up, and a website url. This step is completely optional as you can do the modifications later after creating the application also. I would go chose “Skip” this time as I just want to test the functionality.
  6. That’s all it needs to create a new application or in other words- to generate an API Key. You can see your API key generated on the third screen. You can also find the same under the Dashboard option.
    Okay, now we have API Key and we should go explore how it looks and works. I would say it really has a brilliant documentation of each domain of use and very well explained… also with working demo for each functionality. For me, it was like just Copy/Paste the code and you’re done, it’s that easy!
    I suggest you to go through the documentation properly if you to master all the functions or want to dive deep into any specifics.
    It offers JavaScript API, Widgets and REST API to empower your application. I’ll prefer using JavaScript API as it’s super easy to configure and start using on fly.
How I made it work! (They already have made it…lol 😀  I just copied the code and start rolling)
  1. I created a brand new HTML page and inserted the JS script code block explained in the documentation.
  2. I modified the code a bit so that it calls the filepicker.pick() function as soon the document loads. I appended my code in the code block I copied from the documentation.
    Syntax:

    filepicker.pick([options], onSuccess(InkBlob), onError(FPError))

    You can see here it takes three params; first is the configuration options and the latter two are callback functions for Success and Error.
  3. For additional ease, I added a reference to jQuery file so that I can access DOM elements with less hassle. That’s all I needed to do. I started receiving the metadata of uploaded file and I was happy I was able to integrate it… lol.
That’s all it takes to get started with InkFilePicker. You can see it’s working in below snaps.:
On Document Ready
File upload in progress… 
This is what you get in return on successful upload (NO CSS ;))
Here’s my complete HTML code:
             

           

                       

                                   

                                   

                                   

                                   

                                   

                       

           

           

                       

                                   

                                   

                                   

                                   

                                   

                       

           

File Name Url File Size MIME Type isWriteable

            (function(a){if(window.filepicker){return}var b=a.createElement(“script”);b.type=”text/javascript”;b.async=!0;b.src=(“https:”===a.location.protocol?”https:”:”http:”)+”//api.filepicker.io/v1/filepicker.js”;var c=a.getElementsByTagName(“script”)[0];c.parentNode.insertBefore(b,c);var d={};d._queue=[];var e=”pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane”.split(“,”);var f=function(a,b){return function(){b.push([a,arguments])}};for(var g=0;g<e.length;g++){d[e[g]]=f(e[g],d._queue)}window.filepicker=d;
            filepicker.setKey(‘‘); //generate your developer or personal key after registration and add it here.
            filepicker.pick(processResponse);
})(document);
            function processResponse(blob){
                        $(‘span.fileName’).text(blob.filename);
                        $(‘span.url’).text(blob.url);
                        $(‘span.fileSize’).text(blob.size);
                        $(‘span.mimeType’).text(blob.mimetype);
                        $(‘span.isWriteable’).text(blob.isWriteable);
                        console.log(blob);
            }


Hope you Enjoyed this post… thanks for reading!!

Leave a Comment