File encode

When we want to submit files along with the classic form post we run into a serious browser limitation. The file input field is the only field available to submit files to a server but its value cannot be set on older browsers. The file input field value can only be modified by the user by manually adding files (in one action).

To circumvent this, we can encode files as base64 strings and add those strings to hidden input fields. Then we decode the strings on the server to get back to a file object.

The File encode plugin does just that, it encodes a dropped file as a base64 string and stores the string in a hidden input field as a JSON string. It uses a JSON string so it can also add the file size, type, name and metadata.

The resulting object will look something like this.

{
    "id": "b56kpu6u9",
    "name": "encoded-file.png",
    "type": "image/png",
    "size": 123456,
    "metadata": {
        "resize": {
            "mode": "force",
            "size": {
                "width": 200,
                "height": 200
            }
        },
        "crop": {
            "rect": {
                "x": 0.19234,
                "y": 0,
                "width": 1,
                "height": 0.61213
            },
            "aspectRatio": 1
        }
    },
    "data": "iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAA..."
}

Submitting forms with very large base64 encoded strings can result in browsers running out of memory (especially on mobile devices). Server side security software might also tag a big form post as insecure and prevent the submit from succeeding. To remedy this we can use the Image transform plugin to limit the file size before encoding.

Installation

Using npm

npm i filepond-plugin-file-encode --save

Now we can add the File Encode plugin to our project like this.

// Import FilePond
import * as FilePond from 'filepond';

// Import the plugin code
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';

// Register the plugin
FilePond.registerPlugin(FilePondPluginFileEncode);

Using a CDN

<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileEncode);

    // ... FilePond initialisation code here
</script>

Manual installation

<!-- add before </body> -->
<script src="filepond-plugin-file-encode.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileEncode);

    // ... FilePond initialisation code here
</script>

Properties

Property	Default value	Description
`allowFileEncode`	`true`	Enable or disable file encoding

Methods

These methods are automatically added to the file item

Method	Description
`getFileEncodeBase64String()`	Returns the base64 encoded file string
`getFileEncodeDataURL()`	Returns the base64 encoded file string in DataURL format