Image Upload

Configure how images are uploaded and stored when users drag, paste, or browse for images in the editor.

Pexelize storage (default)

Images are uploaded to Pexelize CDN automatically with no configuration required. The editor returns a hosted URL for each upload:

<PexelizeEditor
  ref={editorRef}
  editorKey="pk_your_key"
  editorMode="email"
/>

Custom upload handler

Handle uploads yourself by providing an onUpload callback that receives the file and returns a URL:

React

import { useRef } from 'react';
import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

function CustomUploadEditor() {
  const editorRef = useRef<PexelizeEditorRef>(null);

  const handleUpload = async (file: File): Promise<{ url: string }> => {
    const formData = new FormData();
    formData.append('image', file);

    const res = await fetch('/api/images/upload', {
      method: 'POST',
      body: formData,
    });
    const { url } = await res.json();
    return { url };
  };

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      onUpload={handleUpload}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    @upload="handleUpload"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';

const editorRef = ref<InstanceType<typeof PexelizeEditor>>();

async function handleUpload(file: File): Promise<{ url: string }> {
  const formData = new FormData();
  formData.append('image', file);

  const res = await fetch('/api/images/upload', { method: 'POST', body: formData });
  const { url } = await res.json();
  return { url };
}
</script>

Angular

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';
import type { PexelizeSDK } from '@pexelize/editor-types';

@Component({
  selector: 'app-upload-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      #editor
      editorKey="pk_your_key"
      editorMode="email"
      (upload)="handleUpload($event)"
    ></pexelize-editor>
  `,
})
export class UploadEditorComponent {
  @ViewChild('editor') editorComp!: PexelizeEditorComponent;

  async handleUpload(file: File): Promise<{ url: string }> {
    const formData = new FormData();
    formData.append('image', file);

    const res = await fetch('/api/images/upload', { method: 'POST', body: formData });
    const { url } = await res.json();
    return { url };
  }
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  callbacks: {
    onUpload: async (file: File) => {
      const formData = new FormData();
      formData.append('image', file);

      const res = await fetch('/api/images/upload', { method: 'POST', body: formData });
      const { url } = await res.json();
      return { url };
    },
  },
});

Return format

The onUpload callback must return a promise resolving to { url: string }. If the upload fails, throw an error and the editor will display a failure message to the user.

Programmatic upload

Trigger an upload from outside the editor:

const { url } = await pexelize.uploadImage(file);

Accepted formats

The editor accepts JPEG, PNG, GIF, WebP, and SVG files by default. Maximum file size is determined by your Pexelize plan or your custom upload handler.

Method reference

Method	Returns	Description
uploadImage(file)	Promise<{ url: string }>	Programmatically upload an image

Callback	Parameters	Description
onUpload	(file: File) => Promise<{ url: string }>	Custom upload handler replacing default storage

Next steps

• External Storage — full control with presigned URLs and asset browsing
• Custom Fonts — add brand fonts alongside images
• Load & Save Designs — persist designs with uploaded image references