FilePond Pintura Image Editor

Combine FilePond with Pintura and create the perfect image edit and upload experience.

Learn more about Pintura

File rename

The File Rename plugin allows us to rename files before they are added to FilePond.

Installation

Using npm

npm i filepond-plugin-file-rename --save

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

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

// Import the plugin code
import FilePondPluginFileRename from 'filepond-plugin-file-rename';

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

Using a CDN

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

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

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

Manual installation

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

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

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

Usage

This example keeps the file extension in place but replaces the name with a custom name.

FilePond.setOptions({
    fileRenameFunction: (file) => {
        return `my_new_name${file.extension}`;
    },
});

You can also return a Promise and do asynchronous file renaming.

FilePond.setOptions({
    fileRenameFunction: (file) =>
        new Promise((resolve) => {
            resolve(window.prompt('Enter new filename', file.name));
        }),
});

Properties

Property Default value Description
allowFileRename
true
Enable or disable file renaming
fileRenameFunction
null
A function that receives an objecting containing file information like basename, extension and name. It should return either a string value or a Promise that resolves with a string value.