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:
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.
As soon sign up process completes (kidding… it just takes to enter your email address and password), welcome page appears:
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:
Enter Application details – name of the application and SDK’s you’re planning to use > Hit “Next Step”.
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.
How I made it work! (They already have made it…lol 😀 I just copied the code and start rolling)
I created a brand new HTML page and inserted the JS script code block explained in the documentation.
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.
- 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:
filepicker.setKey(‘‘); //generate your developer or personal key after registration and add it here.
Hope you Enjoyed this post… thanks for reading!!