# Export Base64 DataURL
We can use the [FileReader](https://pqina.nl/blog/convert-a-file-to-a-base64-string-with-javascript/) API to read an image file and convert it to a base64 encoded dataURL.
* [ JavaScript](#javascript-panel-0)
* [ React](#react-panel-0)
* [ Vue](#vue-panel-0)
* [ Svelte](#svelte-panel-0)
* [ Angular](#angular-panel-0)
* [ jQuery](#jquery-panel-0)
* [index.html](#index-html-panel-0)
```html
```
* [App.jsx](#App-jsx-panel-0)
* [App.css](#App-css-panel-0)
```jsx
import '@pqina/pintura/pintura.css';
import './App.css';
import { useRef } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
const fileToDataURL = (file) => {
new Promise((resolve, reject) => {
// Encode the file using the FileReader API
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
};
function App() {
const editorRef = useRef(null);
const handleEditorProcess = (imageState) => {
fileToDataURL(imageState.dest).then((dataURL) => {
console.log(dataURL);
});
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-0)
```html
```
* [App.svelte](#App-svelte-panel-0)
```svelte
```
* [app.component.ts](#app-component-ts-panel-0)
* [app.component.html](#app-component-html-panel-0)
* [app.component.css](#app-component-css-panel-0)
* [app.module.ts](#app-module-ts-panel-0)
```javascript
import { Component, ViewChild } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
const fileToDataURL = (file: File): string =>
new Promise((resolve, reject) => {
// Encode the file using the FileReader API
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild('editor') editor?: any;
editorDefaults: any = getEditorDefaults();
handleEditorProcess(imageState: any): void {
this.fileToDataURL(imageState.dest).then((dataURL) => {
console.log(dataURL);
});
}
}
```
```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-0)
```html
```