♥

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

true

null