Editing an image in a file input element

The most straightforward method to offer image editing in a form.

We pass the contents of a file input element to the openDefaultEditor factory which opens the file in Pintura and sets the edited image as the new file input value.

Setting the value of a file input is possible on browsers that support the DataTransfer constructor, currently this is Firefox, Chrome, Chromium powered browsers, and Safari 14.1.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<input type="file" accept="image/*" id="fileInput" />

<script type="module">
    import { openDefaultEditor } from './pintura.js';

    const fileInput = document.querySelector('#fileInput');

    fileInput.addEventListener('change', () => {
        // Exit if no files selected
        if (!fileInput.files.length) return;

        // Edit the selected file
        const editor = openDefaultEditor({
            imageCropAspectRatio: 1,
            src: fileInput.files[0],
        });

        // When done, assign the resulting file to the file input
        editor.on('process', (imageState) => {
            // Create a files list
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(imageState.dest);

            // Assign new files
            fileInput.files = dataTransfer.files;
        });
    });
</script>

App.jsx

import '@pqina/pintura/pintura.css';
import { useRef, useState } from 'react';
import { PinturaEditorModal } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const [editorEnabled, setEditorEnabled] = useState(false);

    const [editorSrc, setEditorSrc] = useState(undefined);

    const fileInputRef = useRef(null);

    const handleInputChange = () => {
        // Exit if no files selected
        if (!fileInputRef.current.files.length) return;

        // Edit the selected file
        setEditorEnabled(true);
        setEditorSrc(fileInputRef.current.files[0]);
    };

    const handleEditorHide = () => setEditorEnabled(false);

    const handleEditorProcess = (imageState) => {
        // Create a files list
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(imageState.dest);

        // Assign new files
        fileInputRef.current.files = dataTransfer.files;
    };

    return (
        <div className="App">
            <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                onChange={handleInputChange}
            />

            {editorEnabled && (
                <PinturaEditorModal
                    {...editorDefaults}
                    src={editorSrc}
                    imageCropAspectRatio={1}
                    onHide={handleEditorHide}
                    onProcess={handleEditorProcess}
                />
            )}
        </div>
    );
}

export default App;

App.vue

<template>
    <div>
        <input
            ref="fileInput"
            type="file"
            accept="image/*"
            v-on:change="handleInputChange($event)"
        />

        <PinturaEditorModal
            v-if="editorEnabled"
            v-bind="editorDefaults"
            :src="editorSrc"
            :imageCropAspectRatio="1"
            v-on:pintura:hide="handleEditorHide($event)"
            v-on:pintura:process="handleEditorProcess($event)"
        />
    </div>
</template>
<script>
import { PinturaEditorModal } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditorModal,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            editorEnabled: false,

            editorSrc: undefined,
        };
    },

    methods: {
        handleInputChange: function () {
            // Exit if no files selected
            if (!this.$refs.fileInput.files.length) return;

            // Edit the selected file
            this.editorEnabled = true;
            this.editorSrc = this.$refs.fileInput.files[0];
        },

        handleEditorHide: function () {
            this.editorEnabled = false;
        },

        handleEditorProcess: function (imageState) {
            // Create a files list
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(imageState.dest);

            // Assign new files
            this.$refs.fileInput.files = dataTransfer.files;
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';
</style>

App.svelte

<script>
    import { PinturaEditorModal } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    let editorEnabled = false;

    let editorSrc = undefined;

    let fileInput;

    const handleInputChange = () => {
        // Exit if no files selected
        if (!fileInput.files.length) return;

        // Edit the selected file
        editorEnabled = true;
        editorSrc = fileInput.files[0];
    };

    const handleEditorHide = () => {
        editorEnabled = false;
    };

    const handleEditorProcess = (event) => {
        const imageState = event.detail;

        {
            // Create a files list
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(imageState.dest);

            // Assign new files
            fileInput.files = dataTransfer.files;
        }
    };
</script>

<div>
    <input
        bind:this={fileInput}
        type="file"
        accept="image/*"
        on:change={handleInputChange}
    />

    {#if editorEnabled}
        <PinturaEditorModal
            {...editorDefaults}
            src={editorSrc}
            imageCropAspectRatio={1}
            on:hide={handleEditorHide}
            on:process={handleEditorProcess}
        />
    {/if}
</div>

import { Component, ViewChild } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    @ViewChild('fileInput') fileInput?: any;

    editorDefaults: any = getEditorDefaults();

    editorEnabled: boolean = false;

    editorSrc?: File = undefined;

    handleInputChange(): void {
        // Exit if no files selected
        if (!this.fileInput.nativeElement.files.length) return;

        // Edit the selected file
        this.editorEnabled = true;
        this.editorSrc = this.fileInput.nativeElement.files[0];
    }

    handleEditorHide(): void {
        this.editorEnabled = false;
    }

    handleEditorProcess(imageState: any): void {
        // Create a files list
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(imageState.dest);

        // Assign new files
        this.fileInput.nativeElement.files = dataTransfer.files;
    }
}

<input #fileInput type="file" accept="image/*" (change)="handleInputChange()" />

<pintura-editor-modal
    *ngIf="editorEnabled"
    [options]="editorDefaults"
    [src]="editorSrc"
    [imageCropAspectRatio]="1"
    (hide)="handleEditorHide()"
    (process)="handleEditorProcess($event)"
></pintura-editor-modal>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<input type="file" accept="image/*" id="fileInput" />

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { openDefaultEditor } = $.fn.pintura;

        var fileInput = $('#fileInput');

        fileInput.on('change', function () {
            // Exit if no files selected
            if (!fileInput[0].files.length) return;

            // Edit the selected file
            var editor = openDefaultEditor({
                imageCropAspectRatio: 1,
                src: fileInput[0].files[0],
            });

            // When done, assign the resulting file to the file input
            editor.on('process', function (event) {
                const imageState = event.detail;

                {
                    // Create a files list
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(imageState.dest);

                    // Assign new files
                    fileInput[0].files = dataTransfer.files;
                }
            });
        });
    });
</script>