FilePond Plugin Simple Image Editor

A lightweight FilePond plugin that adds an inline image editor with rotate and flip controls.

Demo online

https://jpcoseani.github.io/filepond-plugin-simple-image-editor/demo/

Usage

Register the plugin and enable it on your FilePond instance:

``js
import * as FilePond from 'filepond';
import SimpleImageEditorPlugin from 'filepond-plugin-simple-image-editor';

FilePond.registerPlugin(SimpleImageEditorPlugin);

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

The plugin adds a small edit button on each image item. Clicking the button opens a modal editor
that lets users rotate or flip the image and apply the change.

Demo

A minimal demo is available in the demo/ folder. Serve the repository root with a static
web server and open the demo page. The example below uses npx so you don't need to install
anything globally.

`sh
npx http-server .
`

Then open http://localhost:8000/demo/ in your browser. The demo
preloads sample images so you can immediately click the pencil button and open the modal editor.

$3

If you're integrating FilePond with React, the repository also ships a dedicated React demo
powered by react-filepond.

`sh
npx http-server .
`

Then open http://localhost:8000/demo/react/ to see the
React integration with preloaded images and the Simple Image Editor plugin.

Configuration

The plugin exposes a single option namespace, simpleImageEditor, which currently supports label
customization for internationalization and optional CSS class overrides.

$3

`ts
simpleImageEditor: {
labels: {
editorButtonLabel: string;
editorButtonIcon: string;
modalTitle: string;
cancelButtonLabel: string;
applyButtonLabel: string;
actionLabels: {
rotateLeft: string;
rotateRight: string;
rotate180: string;
flipHorizontal: string;
flipVertical: string;
};
};
classButton?: string;
classModal?: string;
classControls?: string;
classRotateButton?: string;
classFlipButton?: string;
}
`

$3

The action label strings are used for the icon button aria-label attributes and the
tooltip text via the title attribute.

`js
const defaultLabels = {
editorButtonLabel: 'Edit image',
editorButtonIcon: '✏️',
modalTitle: 'Edit image',
cancelButtonLabel: 'Cancel',
applyButtonLabel: 'Apply',
actionLabels: {
rotateLeft: 'Rotate left',
rotateRight: 'Rotate right',
rotate180: 'Rotate 180°',
flipHorizontal: 'Flip horizontally',
flipVertical: 'Flip vertically',
},
};
`

$3

Use FilePond.setOptions (or provide options when creating FilePond) to override any of the
labels. Only the provided values are replaced; the rest fall back to the defaults.

`js
FilePond.setOptions({
simpleImageEditor: {
labels: {
editorButtonLabel: 'Bild bearbeiten',
modalTitle: 'Bild bearbeiten',
cancelButtonLabel: 'Abbrechen',
applyButtonLabel: 'Übernehmen',
actionLabels: {
rotateLeft: 'Links drehen',
rotateRight: 'Rechts drehen',
rotate180: '180° drehen',
flipHorizontal: 'Horizontal spiegeln',
flipVertical: 'Vertikal spiegeln',
},
},
},
});
`

$3

You can customize just a subset of strings, including the button icon, without redefining all
labels.

`js
FilePond.setOptions({
simpleImageEditor: {
labels: {
editorButtonIcon: '🖉',
modalTitle: 'Quick edits',
},
},
});
`

$3

Provide custom class names to hook into your own styles. Classes are appended to the default
structure and applied to the pencil button, modal dialog container, control group, and the rotate
or flip action buttons.

`js
FilePond.setOptions({
simpleImageEditor: {
classButton: 'editor-button',
classModal: 'editor-modal',
classControls: 'editor-controls',
classRotateButton: 'editor-control editor-control-rotate',
classFlipButton: 'editor-control editor-control-flip',
},
});
`

Usage scenarios

Use the plugin in the way that matches your setup. The snippets below mirror the structure of the
official FilePond plugin documentation and highlight common integration patterns.

$3

`js
import * as FilePond from 'filepond';
import SimpleImageEditorPlugin from 'filepond-plugin-simple-image-editor';

FilePond.registerPlugin(SimpleImageEditorPlugin);

const pond = FilePond.create(document.querySelector('input[type=\"file\"]'), {
allowMultiple: true,
credits: false,
});
`

$3

`jsx
import React, { useState } from 'react';
import * as FilePond from 'filepond';
import { FilePond as ReactFilePond } from 'react-filepond';
import SimpleImageEditorPlugin from 'filepond-plugin-simple-image-editor';

FilePond.registerPlugin(SimpleImageEditorPlugin);

export default function ImageUploader() {
const [files, setFiles] = useState([]);

return (
files={files}
onupdatefiles={setFiles}
allowMultiple={true}
credits={false}
acceptedFileTypes={['image/*']}
/>
);
}
`

$3

Use files (or pond.addFile) to preload images so the editor button is available immediately.

`js
const pond = FilePond.create(input, { credits: false });

pond.addFile('/images/already-uploaded.png');
`

$3

Pair the editor with the FilePond server API. The plugin edits the image before the upload so your
server receives the transformed image.

`js
FilePond.create(input, {
credits: false,
server: {
process: '/api/uploads',
revert: '/api/uploads/revert',
},
});
`

$3

`js
FilePond.setOptions({
simpleImageEditor: {
labels: {
editorButtonLabel: 'Editar imagen',
modalTitle: 'Editar imagen',
cancelButtonLabel: 'Cancelar',
applyButtonLabel: 'Aplicar',
actionLabels: {
rotateLeft: 'Girar a la izquierda',
rotateRight: 'Girar a la derecha',
flipHorizontal: 'Voltear horizontal',
flipVertical: 'Voltear vertical',
},
},
},
});
``