# 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](https://caniuse.com/mdn-api%5Fdatatransfer%5Fdatatransfer), currently this is Firefox, Chrome, Chromium powered browsers, and Safari 14.1. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-0) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-0) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-0) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-0) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-0) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-0) * [index.html](#index-html-panel-0) ```html ``` * [App.jsx](#App-jsx-panel-0) ```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 (
{editorEnabled && ( )}
); } export default App; ``` * [App.vue](#App-vue-panel-0) ```html ``` * [App.svelte](#App-svelte-panel-0) ```svelte
{#if editorEnabled} {/if}
``` * [app.component.ts](#app-component-ts-panel-0) * [app.component.html](#app-component-html-panel-0) * [app.module.ts](#app-module-ts-panel-0) ```javascript 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; } } ``` ```html ``` ```javascript 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](#index-html-panel-0) ```html ```