# Can the editor upload to Amazon S3? Using a function as the value of the [store](../../api/image-editor/exports/#store) property on the [createDefaultImageWriter](../../api/image-editor/exports/#createdefaultimagewriter) method we can customize the upload process and upload files to any third-party location. Include the AWS script somewhere on the webpage and update the version. ```html ``` * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-1) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-1) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-1) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-1) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-1) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-1) * [index.html](#index-html-panel-1) ```html

``` * [App.jsx](#App-jsx-panel-1) * [App.css](#App-css-panel-1) ```jsx import '@pqina/pintura/pintura.css'; import './App.css'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults({ imageWriter: { store: (state, options, onprogress) => new Promise((resolve, reject) => { // Get file object reference const { dest } = state; // Set up S3 connection const s3 = new AWS.S3({ accessKeyId: 'access-key', secretAccessKey: 'secret-access-key', region: 'eu-central-1', }); // Upload to S3 const httpUpload = s3.upload( { Bucket: 'my-bucket-name', Key: Date.now() + '_' + dest.name, Body: dest, ContentType: dest.type, ACL: 'public-read', }, (err, data) => { // Test if returned error, if so, throw error in UI if (err) return reject('Something went wrong.'); // Remember key (store is returned in editor 'process' event) state.store = data.Key; // Resolve with updated state resolve(state); } ); // Show S3 upload progress in UI httpUpload.on('httpUploadProgress', onprogress); }), }, }); function App() { return (

); } export default App; ``` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-1) ```html ``` * [App.svelte](#App-svelte-panel-1) ```svelte

``` * [app.component.ts](#app-component-ts-panel-1) * [app.component.html](#app-component-html-panel-1) * [app.component.css](#app-component-css-panel-1) * [app.module.ts](#app-module-ts-panel-1) ```javascript import { Component } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { editorDefaults: any = getEditorDefaults({ imageWriter: { store: (state, options, onprogress) => new Promise((resolve, reject) => { // Get file object reference const { dest } = state; // Set up S3 connection const s3 = new AWS.S3({ accessKeyId: 'access-key', secretAccessKey: 'secret-access-key', region: 'eu-central-1', }); // Upload to S3 const httpUpload = s3.upload( { Bucket: 'my-bucket-name', Key: Date.now() + '_' + dest.name, Body: dest, ContentType: dest.type, ACL: 'public-read', }, (err, data) => { // Test if returned error, if so, throw error in UI if (err) return reject('Something went wrong.'); // Remember key (store is returned in editor 'process' event) state.store = data.Key; // Resolve with updated state resolve(state); } ); // Show S3 upload progress in UI httpUpload.on('httpUploadProgress', onprogress); }), }, }); } ``` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```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-1) ```html

```