N00b: My first time installing Filepicker

The following is a walkthrough on installing Filepicker for the first time.

Alright, so it’s been 8 months since I’ve been working for Filepicker as the marketing guy, and I haven’t installed Filepicker yet.

I got an email from my boss looking for a demo of the product – as in how a developer would install and use it.

Since my background is all web development, I felt more than capable of giving it a shot, but there was now an extra challenge I thought of: how quickly could I do it? Being a few years out of regularly coding each day, I was stoked to jump into this challenge, and do a bit of coding!

Installing Filepicker is pretty easy on any existing app or website, but I wanted to build a clean demo so I could show off to you guys, so here’s the steps that I took:

  1. Login to my own webserver and add a subdomain (filepicker-test.markbakker.ca) with cpanel.
  2. Get a Filepicker account
  3. Visit the documentation to get a snippet for a simple upload button.
    https://www.filestack.com/docs/uploads/pickers/#web-picker
<script src="//api.filestack.com/v1/filepicker.js" type="text/javascript"></script>
<input type="filepicker" data-fp-apikey="A0B2jitDR7mC6QasdYPqgz" data-fp-mimetypes="*/*" data-fp-container="modal" />

Once I had this snippet, I could load Filepicker on my test subdomain. To get to this point was astonishingly quick, just under 15 minutes.

But, that’s not totally usable. Now I wanted to create an example of the app actually in use, connect to a cloud service, upload a file, and see the correct link to it.

Over to the documentation for a more advanced version of the code, and some more options to troubleshoot.

Hot Tip:

By the way, did you notice, that when you’re logged in, and viewing the developer portal, we grab your API key and put it in the examples on the right! That way, when you RUN the code, or copy and paste, it replicates your account settings.

First up was a basic pick().

filepicker.pick({
  mimetypes: ['image/*', 'text/plain'],
  container: 'window',
  services:['COMPUTER', 'FACEBOOK', 'GMAIL'],
}, function(Blob){
  console.log(JSON.stringify(Blob));
}, function(FPError){
  console.log(FPError.toString());
});

This caused a bit of a problem, because as soon as the page loaded, it opened the Filepicker dialog. So, to make it more user friendly, I wrapped it with a function and added a button:

function pickMe(){
  filepicker.pick({ });
}

<button onClick="pickMe()">Load an image</button>

Now the Filepicker dialog opened on the click of the button. I could pick a file, and sure enough, the console had the JSON blob info. Now, to add some user feedback that makes the demo more fun to watch.

I added an <img> and added a piece of javascript to update the src with the blob url.

document.getElementById("instagram").src = Blob.url

You can see, that once I clicked upload the image was pulled from my facebook account, and it was updated in the image tag on the page. Success!

At this point, it took me about 35 minutes – not bad since I wrote the html and javascript from scratch too!

Next up, connecting S3

Once the image was being loaded from the Filepicker servers, now I wanted to store that file in my own storage. I went to Amazon Web Services, and created a new S3 account.

I ran into a few problems setting up Amazon S3, but I had never done that before. So with just the help of our documentation, I got a new bucket created with permissions, and put the App Key and App Secret into the Filepicker developer portal.

I made one mistake that I needed some help with support though. I selected Oregon as the location for my bucket, but our servers are actually in Virgina, so no need to select a region – US Standard is the best option.

There were three key items I needed to change to have the uploaded images stored in S3. The function, the location, and accessing the blob.

  1. The function needed is no longer a pick() but a pickAndStore(). Read more about the options of that in our documentation.
  2. You need to add where you’d like to store the file with pickAndStore(). That’s quite simple, just add: location:”S3″ to the function. Full example below.
  3. The functions return slightly different outputs. In pick() an object is returned. In pickAndStore() an array of objects is returned. (Yes I was confused a bit by this one too.) I had to change the way I was traversing the output to find the url of the uploaded image.

Here’s the JSON blob that Filepicker returns:

[{
  "url": "https://www.filestack.com/api/file/clrkrkVS1OgjLz1aYSCq",
  "filename": "Katos_got_a_big_nose.jpg",
  "mimetype": "image/jpeg",
  "size": 117485,
  "key": "uSIhXVSpTqf6AAWJrxFU_10154955744160512.jpg",
  "container": "markbakker-filepicker",
  "isWriteable": true
}]

Traversing the Blob

As I mentioned in bullet 3 above, the output format changed between the two functions. Ultimately what I was looking for was the FileLink url. This would give me a Filepicker link to the image.

Don’t be confused with not getting an S3 link though, that’s not what we’re looking for. Getting a Filepicker link will keep it secure, and if there were any conversions done to it during the upload process, it will load the correct version. Also, once you have the Filepicker link you can do more conversions on it, simply by appending any of our REST API commands to the url. You might want to to that in javascript on the fly.

The completed code

Without further ado, here’s my final code:

<html>
  <head>
    <title> Filepicker Installation Test</title>
  </head>

  <body>
    <h3>Hello World</h3>
    <h4>Try out Filepicker below:</h3>

    <script type="text/javascript" src="//api.filestack.com/v1/filepicker.js"></script>

    <script>
      filepicker.setKey("A0B2jitDR7mC6QasdYPqgz");

      function pickMe(){
        filepicker.pickAndStore({
          mimetypes: ['image/*', 'text/plain'],
          container: 'modal',
          services:['COMPUTER', 'FACEBOOK', 'GMAIL'],
        }, {
          location:"S3"
        }, function(Blob){
          document.getElementById("instagram").src = Blob[0].url
        }, function(FPError){
          console.log(FPError.toString());
        });
      }
    </script>

    <button onClick="pickMe()">Load an image</button>

    <div id="box">
      <img id="instagram" src="" width="612" height="612" />
    </div>

  </body>
</html>

So, to show that it worked, here’s the file loaded in the <img> tag, and the S3 bucket!

 

If you want to see more dog pictures, instagram me.

 

Read More →