Image Upload

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

Dragble storage (default)

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

<DragbleEditor ref={editorRef} editorKey="db_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 { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

function CustomUploadEditor() {
  const editorRef = useRef<DragbleEditorRef>(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 (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_your_key"
      editorMode="email"
      onUpload={handleUpload}
    />
  );
}

Vue

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

<script setup lang="ts">
import { ref } from "vue";
import { DragbleEditor } from "dragble-vue-editor";

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

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 { DragbleEditorComponent } from "dragble-angular-editor";
import type { DragbleSDK } from "dragble-types";

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

  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

dragble.init({
  containerId: "editor-container",
  editorKey: "db_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 };
    },
  },
});

:::warning 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 dragble.uploadImage(file);

:::tip Accepted formats The editor accepts JPEG, PNG, GIF, WebP, and SVG files by default. Maximum file size is determined by your Dragble 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