Create an Awesome Photo Collage with React and Filestack

A photo collage is a popular way of sharing amazing moments in our lives. From exotic vacations, to crazy parties, to romantic seaside weddings and more, collages capture many moments to create one multifaceted composite.

As a printing application, the ability to upload pictures and create photo collages for your customers is an absolute must-have.

The are a few open source libraries and repos available for creating a photo collage in React, including React Images, React Collage and Facebook Photo Collage. However there are several advantages of using an end-to- end image uploading and management service like Filestack.

Filestack’s image uploading API connects your users to 20+ cloud sources, like Facebook, Instagram, and Google Drive, so they never have to leave your site to find their pictures. Also, they are able to edit their photos (crop, resize, monochrome, etc) within the file upload dialog box, so their picture will always turns out perfectly.

(See how printing websites like WeMontage and Social Print Studio use Filestack to allow users to upload and edit pictures). 

However, the benefit of Filestack extends past the streamlined UI and  high quality user experience. It is extremely easy for you to implement as a developer.  You can have a fully functioning file uploader and collage generator in just minutes. In the next section I will show you how to create collages in React and Filestack with just few lines of code!

React App

In this tutorial we are using React and you can clone/fork the repository directly from my github.

The app is very basic, it’s just a single view page where users can upload pictures and instantly get a collage.

localhost:8080

Upload a Set of Pictures

If you haven’t done it yet just go ahead and install filestack-js, the new official npm package.

npm install filestack-js

filestack-js  is the official client to upload images and provide the function pick. This is probably the most important function provided by the client as editing pictures (guess what!) often requires us to upload them first.

Now, pick allows users to upload different files with different sizes which is not what we want. We only allow images whose maximum size is 5Mbs.

Luckily pick is smart enough to accept an options parameter to customize its own behavior. So, for instance, the 2 constraints defined above can be summarized in an object like this:

{
  accept: 'image/*',
  maxSize: 1024 * 1024 * 5,
}

Since we are talking about collage we must allow for multi-upload. pick by default set maxFiles to 1 but we can explicitly define a range by pairing maxFiles and minFiles.

For example, let’s allow users to upload a minimum of 2 pictures to a maximum of 6. The new options parameters would look like the following:

{
  accept: 'image/*',
  maxSize: 1024 * 1024 * 5,
  minFiles: 2,
  maxFiles: 6,
}

Finally, we define a function filestack which returns the promise of pick:

filestack = () => {
  return client.pick(
    {
      accept: 'image/*',
      maxSize: 1024 * 1024 * 10,
    }
  );
};

Great!

You can now use it along within handleUpload to get the images information (url, handle…) and create the collage.

Create the Collage

Collage is one of the available transformations provided by the Filestack process engine and it follows the common url structure where the transformation name is defined within the url string:

https://process.filestackapi.com/collage=[options]/ + filestack_handle

or

https://process.filestackapi.com/<API_KEY>/collage=[options]/ + filestack_handle

Let’s take a look a the options

• collage=files:[0ZgN5BtJTfmI1O3Rxhce,6a9QVg1LS4uoPN7B4HYA]: An array of Filestack file handles or external urls. These are the images that will comprise the other images in the collage. Required field.
• collage=margin:50: Sets the size of the border between and around the images. This must be an integer in a range from 1 to 100. The default value is 10.
• collage=width:1000: Sets the general height of the collage as a whole. Required field.
• collage=color:white or FFFFFFFF: Sets the border color for the collage.
• collage=fit:crop: Allows you to control how the images in the collage are manipulated so that the final collage image will match the height and width parameters you set more closely.
• autorotate:true: Setting this parameter to true automatically rotates all the images in the collage according to their exif orientation data.

The option collage is a list of handles/urls to compose the collage so what’s the role of filestack_handle at the end of the process API url?

In fact, it’s going to the last picture in the collage!

Let’s take a look at an example.

The collage comes from the following url:

https://process.filestackapi.com/collage=files:[9BKsieSNSGavL1v57Dsq,LrtlU9HdQoCCMFHXp4p8],w:800,h:600,/otZByO7gQAqx0jKenh2W

So we need to take the handles returned by pick and dynamically create the url string.

pick returns filesUploaded which is nothing but an array of objects where each of these is nothing but a description of the uploaded file. So, filesUploaded.handle is for example the handle of that specific file, precisely what we need.

Here is the code to construct the final string:

async handleUpload () {
  try {
    const { filesUploaded } = await this.filestack();
    const first = filesUploaded.shift();
    const transformation = filesUploaded.reduce((acc, file, index,   files) => {
      return index < files.length - 1
      ? `${acc},${file.handle}`
      : `${acc}],w:800,h:600,/${file.handle}`;
    }, `/collage=files:[${first.handle}`);

    this.setState({ url: processAPI + transformation });
  } catch (e) {
    console.log(e);
  }
}

1. We remove the first object and pass it to first.

2. Then, the JavaScript reduce function takes the remaining filesUploaded array and literally reduces it to the substring value of the option collage.

3. Notice we can pass an initial value to acc as second parameter of the reduce function, in our case it’s /collage=files:[${first.handle}.

4. Finally, we set the url in the state and consequently show the collage in the browser.

AND THAT’S ALL!

More Image Transformations

Here is a complete list of image transformations supported by Filestack.

• Compress
• Facial Detection
• Crop
• Rotate
• Border and Effects
• Filters
• Collage
• Image Enhancements
• URL Screenshot
• Image to ASCII
• File type conversions
• Security

Read More →