How to Create an Image Gallery with Filestack

Samuele ZazaTutorials, Working with Filestack0 Comments

In the last tutorials, I gave an overview of Filestack’s ability to manipulate documents and audio files: We built a fanfiction website to showcase documents and a soundstack-like app to show the powerful audio transcoding function of Filestack’s API.  Nonetheless, I often highlight Filestack’s value when it comes to uploading and manipulating pictures, so it’s about time we work with pics.

Filestack provides users with endless possibilities to deal with pictures so a single tutorial is definitely not enough to cover them all:
Today we are going back to the roots to see how easily we can upload pictures and immediately apply small manipulations with nothing more than a pick() function call.

As usual in my posts, I provide you the link for source code here. The app is written in Node.js with JQuery and React.js (Yep, I love Javascript if it wasn’t clear).

NB: I will go through the tutorial explaining every action in detail, as working with images is of primary concern for our clients.

The App – ImageStack

So what kind of app we are going to write today? An image gallery app of course. The idea behind is very simple (…and predictable):

Our users love to capture great moments of their lives and share them on the web, so we provide them our ImageStack platform app.

In addition, we aim to provide an easy way to upload pictures and immediately share them on the web.

Does this description sound familiar?!

Here is the homepage:

 

That’s a very clean UI for the users thanks to Bootstrap and minimum css customization. Users just need to click on start to jump to the upload section:

 

Setting Up Filestack

We want to integrate Filestack in the app for easy picture uploading, so we start by including the script in our html page:

<script src="//api.filestackapi.com/filestack.js"></script>

When you first create your API key you will receive a widget to include in the page to immediately start using Filestack. This is will pop up when you sign into the developer portal. In our case, we are going to create the upload button manually for total customization.

After we grab our API key, we can include it in our page by setting the key globally:

filepicker.setKey("AfcnFThTU4ebKMjxRMngSz");

In many situations there is no need to have set it globally, but rather we can attach it to the URL of the API call. Personally, I prefer to set it once and for all when possible.

Uploading a Picture

Great, in two steps we setup all that’s needed to start using Filestack. Now, let’s start thinking about the uploader itself:

  • What kind of files are allowed to be uploaded?
  • What source to upload from are allowed?
  • What are the maximum picture sizes to be uploaded?

Filestack has everything we need for complete control over the uploading process.  Just take a look at the documentation for the pick() function and you will be amazed by the number of options available.

So let’s take a look at my option object properties for a brief explanation:

{ 
  mimetype: 'image/*',
  hide: true,
  maxSize: 2*1024*1024,
  imageQuality: 90,
  imageDim: [800, null],
  services: ['COMPUTER', 'WEBCAM'],
  openTo: 'COMPUTER'
}

1. The mimetype defines the first contraint, we only want to allow pictures here, so image/* is the perfect solution. There is also another option called extension which is very similar to mimetype but requires the extension of the files instead and infer the mimetypes from them.
NB: mimetype and extension cannot be used together!

2. The hide property hides the modal once the picture is chosen: Since we are going to show a cool uploading bar for the users instead, the uploading is done in background and a onProgress() function is fired to provide us feedback about the current action.

3. A constraint on the image maxSize is good practice so we chose 2MBs (which is the same constraint for WordPress too).

4. Here it comes an initial image compression: imageQuality defines the compression ratio of the pictures. For the purpose of the app we do not want compress to much so a value of 90/100 is acceptable for users.
NB: this only applies to JPEG images.

5. imageDim defines the dimensions of the picture. Since we want to keep the width/height ratio constant, we only defined 800 for width and left auto for height.
NB: This works only on local images or webcam captures.

6. The sources for our files are the local device or the webcam as we want to use imageDim.

7. openTo defines the first choice for uploading a picture, computer in this specific case.

It’s done, our constraints are more or less or fulfilled and this process just requires to create an option object as first parameter for the function pick().

What are the other parameters then? Well, pick() also provides onSuccess, onProgress, onError functions.
Here is the code for onSuccess:

function(Blob) {
  setTimeout(previewImage(Blob.url), 2000);
  console.log(JSON.stringify(Blob));
  _this.data("doc-url", Blob.url);
}

Pretty straightforward! We first end the animation of the progress bar after 2 secs to change its color to green and show a preview of the picture in the page. Then, we log the Blob content which is received from Filestack and attach the URL of the newly uploaded picture to the upload button.

Here is the code for onProgress instead:

function(FPProgress) {
  console.log(parseInt(FPProgress.progress));
  progressPercentage = parseInt(FPProgress.progress) + '%';
  $('.progress-bar').css('width', progressPercentage).text(progressPercentage);
}

The onProgress function continuously receives feedback from Filestack regarding the uploading progress through a JSON file FPProgress. So we log the progress number and transform it in a percentage to be used to animate the progress bar.

Finally the onError function is nothing more than just logging the error as shown in the documentation:

function(FPError) {
  console.log(FPError.toString());
}

Now that we inspected every block of code. I’ll provide you with the complete code for the pick function fired by clicking on the upload button:

$('.filepicker').on('click', function() {
  var _this = $(this); 
  filepicker.pick(
    {
      mimetype: 'image/*',
      hide: true,
      maxSize: 2*1024*1024,
      imageQuality: 90,
      imageDim: [800, null],
      services: ['COMPUTER', 'WEBCAM'],
      openTo: 'COMPUTER'
    },
    function(Blob) {
      setTimeout(previewImage(Blob.url), 2000);
      console.log(JSON.stringify(Blob));
      _this.data("doc-url", Blob.url);
    },
    function(FPError) {
      console.log(FPError.toString());
    },
    function(FPProgress) {
      console.log(parseInt(FPProgress.progress));
      progressPercentage = parseInt(FPProgress.progress) + '%';
      $('.progress-bar').css('width', progressPercentage).text(progressPercentage);
    }
  );
});

In few lines of code and thanks to Filestack we have complete control on the page dynamic behavior!

ImageStack In Action

So now we can try to upload a picture. Take a look at the video. Isn’t it great that we have all the animations thanks to Filestack?

 

And then let’s go back to the homepage to check the result:

 

Perfect! However the pictures in the homepages are responsive thanks to Bootstrap so let’s take a look at the width and height of it:
The original picture is 500×500 pixels but our uploader is setup to change the width to 800px and the height accordingly to maintain the ratio: So the new picture is supposed to be 800×800 right?
Let’s see:

 

It actually resized it to 800×800 as expected!

Conclusion

This time we tested Filestack in its most popular function, handling pictures.

Since our clients commonly request a reliable images uploader we created a sample app to show some of Filestack capabilities: We defined a set of common constraints on the uploader to show how fast and easy Filestack customization is.

In addition to this, we covered in detail the pick() function and exploited the onProgress function parameter to create a catchy UI.