Image Upload

Upload images via drag-drop, paste, or file dialog. Sign up to get your credentials and start uploading images.

Upload Methods

Toolbar Button

Click the 🖼️ button to select images from your device

Drag & Drop

Drag images directly into the editor

Paste

Paste images from clipboard (Ctrl+V)

Configuration

To enable image upload functionality, you need to sign up and get your Client ID and Client Secret from your dashboard. Then configure the uploadConfig prop:

Get Your Credentials: Sign up or log in to access your dashboard and get your Client ID and Client Secret.

import React, { useState } from "react";
import HeliosEditor from "helios-editor";

function EditorWithImageUpload() {
  const [content, setContent] = useState("");

  // Get these credentials from your dashboard after signing up
  const uploadConfig = {
    uploadApiUrl: "https://api.helioseditor.com/api",
    clientId: "your-client-id", // Get from dashboard
    clientSecret: "your-client-secret", // Get from dashboard
  };

  return (
    <HeliosEditor
      value={content}
      onChange={setContent}
      uploadConfig={uploadConfig}
      toolbarOptions={[
        "bold",
        "italic",
        "underline",
        "insertImage", // Enable image insert button
        "link",
        "blockquote",
      ]}
    />
  );
}

Features

Multiple Methods: Support for toolbar button, drag & drop, and paste
Client-side Processing: Images are processed before upload
Easy Setup: Simply sign up, get your credentials, and configure the uploadConfig prop

Next Steps

After uploading images, you can resize them. Learn more in the Image Resizing documentation.