Post
Ask Question

How to Integrate InkFilePicker Library Into Web App

How to integrate InkFilePicker library in Web App

 
I have heard many developers across the forums asking how to integrate the InkFilePicker library into their application and hence thought to give it a try. I'm sharing here the procedure to get started with the library.
 
Formerly known as FilePicker.io, InkFilePicker is a library that allows a user to connect to popular Cloud Services like Dropbox, Facebook, Google Drive, Picasa, Flickr and so on. The latest offering includes SkyDrive, Github, Gmail, FTP, WebDAV and many others. 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 and 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's account, however, it prevents you from doing customizations like-adding your logo, modifying CSS rules, configuring various storage accounts to store data.
 
Use the following procedure to generate an 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 then select the desired package and sign up, however, you will need to enter payment credentials when signing up for a regular account.
     
     
  2. As soon as the sign-up process completes (kidding… it just requires entering your email address and password), the welcome page appears:
     
     
  3. Okay, do you see that big green button that 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 the “Applications” menu:
     
     
  4. Enter the application details: the name of the application and SDKs you're planning to use then hit “Next Step”.
     
     
  5. On the 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 since you can do the modifications later after creating the application also. I would choose “Skip” this time since I just want to test the functionality.
     
     
  6. That's all that is necessary 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 an 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 a working demo for each functionality. For me, it was like just a Copy and Paste of the code and you're done, it's that easy!
 
I suggest you go through the documentation properly to master all the functions or want to dive deeper into any specifics.
 
 
It offers a JavaScript API, Widgets and REST API to empower your application. I prefer using the JavaScript API since it's super easy to configure and you can start using it quickly.
 
How I made it work! (Lol; they already made it; I just copied the code and started 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 where 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 a 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 the 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 the following snaps:
 
 
On Document Ready:
 
 
File Upload in progress…
 
 
This is what you get in the return of a successful upload (No CSS ;)).
 
Here's my complete HTML code: 
  1. <!DOCTYPE html>    
  2. <html>  
  3.    <head>  
  4.       <title></title>  
  5.    </head>  
  6.    <body>  
  7.       <table border="1">  
  8.          <thead>  
  9.             <tr>  
  10.                <th>File Name</th>  
  11.                <th>Url</th>  
  12.                <th>File Size</th>  
  13.                <th>MIME Type</th>  
  14.                <th>isWriteable</th>  
  15.             </tr>  
  16.          </thead>  
  17.          <tbody>  
  18.             <tr>  
  19.                <td><span class="fileName"></span></td>  
  20.                <td><span class="url"></span></td>  
  21.                <td><span class="fileSize"></span></td>  
  22.                <td><span class="mimeType"></span></td>  
  23.                <td><span class="isWriteable"></span></td>  
  24.             </tr>  
  25.          </tbody>  
  26.       </table>  
  27.       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    
  28.       <script type="text/javascript">    
  29.          (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;    
  30.              
  31.          filepicker.setKey('//Your API Key here'); //generate your developer or personal key after registration and add it here.    
  32.          filepicker.pick(processResponse);    
  33.          })(document);    
  34.              
  35.          function processResponse(blob){    
  36.          $('span.fileName').text(blob.filename);    
  37.          $('span.url').text(blob.url);    
  38.          $('span.fileSize').text(blob.size);    
  39.          $('span.mimeType').text(blob.mimetype);    
  40.          $('span.isWriteable').text(blob.isWriteable);    
  41.          console.log(blob);    
  42.          }    
  43.              
  44.       </script>    
  45.    </body>  
  46. </html> 
I hope you enjoyed this article. Thanks for reading!


Similar Articles