Can the editor upload to Amazon S3?
Using a function as the value of the store property on the 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.
<script src="https://sdk.amazonaws.com/js/aws-sdk-<version>.min.js"></script>
JavaScript
React
Vue
Svelte
Angular
jQuery<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./pintura.css" />
</head>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import { appendDefaultEditor } from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
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);
}),
},
});
</script>
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 (
<div className="App">
<PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
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);
}),
},
}),
};
},
methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import { getEditorDefaults } from '@pqina/pintura';
import '@pqina/pintura/pintura.css';
let 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);
}),
},
});
</script>
<div>
<PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
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);
}),
},
});
}
<pintura-editor [options]="editorDefaults" src="image.jpeg"></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
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 {}
<!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>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
useEditorWithJQuery(jQuery, pintura);
$(function () {
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
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);
}),
},
});
});
</script>
