Helios Editor

Upload Configuration

Configure image upload settings for your HeliosEditor instance.

Basic Configuration

The uploadConfig prop allows you to configure the image upload endpoint and authentication:

interface UploadConfig {
  uploadApiUrl?: string;
  clientId?: string;
  clientSecret?: string;
}

Example Usage

const uploadConfig = {
  uploadApiUrl: "https://your-api.com/upload",
  clientId: "your-client-id",
  clientSecret: "your-client-secret",
};

<HeliosEditor
  value={content}
  onChange={setContent}
  uploadConfig={uploadConfig}
  toolbarOptions={[
    "bold",
    "italic",
    "insertImage", // Enable image insert button
  ]}
/>

Configuration Options

uploadApiUrl

The URL endpoint where images will be uploaded. This should be a POST endpoint that accepts FormData.

string (optional)

clientId

Authentication client ID for your upload API. This will be sent as client_id in the request body.

string (optional)

clientSecret

Authentication client secret for your upload API. This will be sent as client_secret in the request body.

string (optional)

Environment Variables

You can use environment variables for configuration:

// .env
REACT_APP_UPLOAD_URL=https://your-api.com/upload
REACT_APP_CLIENT_ID=your-client-id
REACT_APP_CLIENT_SECRET=your-client-secret

// Component
const uploadConfig = {
  uploadApiUrl: process.env.REACT_APP_UPLOAD_URL,
  clientId: process.env.REACT_APP_CLIENT_ID,
  clientSecret: process.env.REACT_APP_CLIENT_SECRET
};

Related Documentation