Applying Watermarks To Images With FilePond

Watermarking photos can be a tedious task. In this quick tutorial we’ll use FilePond and the FilePond Image Transform Plugin to automatically add watermarks to images. FilePond is free and is compatible with most popular frameworks, you can use the result of this tutorial in your React, Vue, Svelte, Angular, or jQuery projects.

If you’re in a rush and want to skip to the result, you can play with the demo on Codesandbox.

Installation

Let’s get started by installing FilePond. We’ll go with NPM. If you want to use Yarn that’s fine as well. If you’re not familiar with NPM you can also manually download and reference the FilePond library files.

If you want to use NPM but you’re not familiar with NPM, you can find more info on NPM here.

In this tutorial we’ll use the plain JavaScript version of FilePond. If you’re using a client-side framework you can find the required code on each FilePond framework adapter GitHub repository, the links can be found in the intro paragraph.

In your project folder, run the following to install FilePond as a dependency.

npm i filepond --save

Since we’re also going to use the Image Transform, Image Preview, and File Metadata plugins we’ll add those as well.

npm i filepond-plugin-image-transform filepond-plugin-image-preview filepond-plugin-file-metadata --save

Setting up FilePond

Okay, our dependencies are ready, let’s set up FilePond.

We add a file input element to the page and we set the multiple attribute so it can handle more than one file.

<input type="file" multiple />

In your JavaScript file import the FilePond styles and scripts.

import 'filepond/dist/filepond.min.css';
import * as FilePond from 'filepond';

Let’s turn the file input into a FilePond element. We can do this by calling the create method and supplying the input element.

FilePond.create(document.querySelector('input[type="file"]'));

FilePond is now ready. You should see a drop area similar to the one shown below.

This is a live demo so you can add files to it.

Please note that for privacy reasons demos on this page don’t upload anything.

It doesn’t yet show image previews or apply watermarks, that’s what we need the plugins for, let’s add them.

Adding plugins

Let’s get back to JavaScript.

We can use the registerPlugin method to add plugins to FilePond.

Our code snippet now looks like this:

// Import FilePond and its styles
import 'filepond/dist/filepond.min.css';
import * as FilePond from 'filepond';

// Import the FilePond plugins
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
import FilePondPluginFileMetadata from 'filepond-plugin-file-metadata';

// Register the plugins with FilePond, so
// FilePond knows they're available
FilePond.registerPlugin(
    FilePondPluginImagePreview,
    FilePondPluginImageTransform,
    FilePondPluginFileMetadata
);

The plugins are now loaded and registered.

The Image Transform and File Metadata plugin won’t do anything yet. If we now add an image file to FilePond the preview plugin shows the image in the drop area.

For the final step, let’s add the watermark.

Setting up our Watermark

The watermark is added to the image by the Image Transform plugin, the watermark instructions are supplied by the File Metadata plugin. The File Metadata plugin automatically adds additional information to files loaded by FilePond. This information can be used after uploading or can be used by other plugins.

We can configure our watermark using markup elements. This markup is usually defined by Pintura Image Editor (an image editor plugin for FilePond) but FilePond can also render it.

Since we only need to update the FilePond.create method, we’ll skip over the imports.

FilePond.create(document.querySelector('input[type="file"]'), {
    // This property describes the metadata object that will be added to each file
    fileMetadataObject: {
        // The `markup` property is how we define our watermark
        markup: [
            // We'll draw a 60ox rectangle aligned with
            // the bottom of the image
            [
                'rect',
                {
                    left: 0,
                    right: 0,
                    bottom: 0,
                    height: '60px',
                    backgroundColor: 'rgba(0,0,0,.5)',
                },
            ],
            // Then we'll draw an image in the bottom right,
            // in this case the FilePond logo
            [
                'image',
                {
                    right: '10px',
                    bottom: '10px',
                    width: '128px',
                    height: '34px',
                    src: 'filepond-logo.svg',
                    fit: 'contain',
                },
            ],
        ],
    },
});

Let’s refresh our page, when dropping in image you can now see the watermark rendered on top of the image in the preview.

We’ll add the onpreparefile callback to get the output of the image transform action so we can see the actual resulting file.

FilePond.create(document.querySelector('input[type="file"]'), {
    // onpreparefile is called when the image transform plugin
    // has transformed an image, in this demo we use it to
    // show the result of the file transformation
    onpreparefile: (file, output) => {
        const result = new Image();
        result.src = URL.createObjectURL(output);
        document.body.appendChild(result);
    },

    // The `fileMetadataObject` property describes the metadata object
    // that will be added to each file
    fileMetadataObject: {
        // The `markup` property is how we define our watermark
        markup: [
            // We'll draw a 60ox rectangle aligned with
            // the bottom of the image
            [
                'rect',
                {
                    left: 0,
                    right: 0,
                    bottom: 0,
                    height: '60px',
                    backgroundColor: 'rgba(0,0,0,.5)',
                },
            ],
            // Then we'll draw an image in the bottom right,
            // in this case the FilePond logo
            [
                'image',
                {
                    right: '10px',
                    bottom: '10px',
                    width: '128px',
                    height: '34px',
                    src: 'filepond-logo.svg',
                    fit: 'contain',
                },
            ],
        ],
    },
});

When we add an image to FilePond, it will load the image, transform the image data with the watermark, and then add the resulting image to the page.

Play with the demo on Codesandbox

In a real life project we probably want to upload our file somewhere.

We can do this by setting the server property. If we set it to a URL, FilePond will automatically try to POST the image data to the server located at the URL.

FilePond.create(document.querySelector('input[type="file"]'), {
    // FilePond will POST files
    // to https://website/my-server-location/
    server: './my-server-location/',

    // Our other properties here
    // ...
});

That’s it, we’re done!

FilePond will now automatically push dropped files to our server.

Conclusion

We installed FilePond and set it up with the required plugins to render watermarks to images. We learned a tiny bit about using Pintura markup to define our watermarks and how to preview our resulting image in the browser. Finallly we quickly looked at how to upload images to our server.