API and Styling

The apiConfig prop allows you to specify endpoints, HTTP methods, headers, and callbacks for upload and delete operations.

API Configuration Interface

interface apiConfig {
  // Required URLs
  deleteUrl: string;        // Path for deleting images, combined with baseUrl
  uploadUrl: string;        // Path for uploading images, combined with baseUrl
  baseUrl: string;          // Base URL for API requests

  // Optional Configuration
  responsePath?: string;    // Path to extract image URL from API response (default: "data.data")
  formDataName?: string;    // Name of the file field in FormData (default: "file")
  additionalHeaders?: Record<string, string>; // Additional headers for API requests

  // HTTP Methods
  uploadMethod?: "POST" | "PUT" | "PATCH";  // HTTP method for upload requests
  deleteMethod?: "POST" | "DELETE" | "PUT"; // HTTP method for delete requests

  // Request Body
  deleteBody?: Record<string, unknown> | ((imageUrl: string) => Record<string, unknown>);

  // Event Callbacks
  onUploadSuccess?: (url: string) => void;
  onUploadError?: (error: any) => void;
  onDeleteStart?: () => void;
  onDeleteSuccess?: () => void;
}

Complete API Configuration Example

const apiConfig = {
  baseUrl: "https://api.example.com",
  uploadUrl: "/upload",
  deleteUrl: "/images/remove",
  formDataName: "profile_picture",
  responsePath: "data.imageUrl",
  additionalHeaders: {
    "X-API-Key": "your-api-key",
    "Client-Version": "1.0.0"
  },
  uploadMethod: "POST",
  deleteMethod: "DELETE",
  deleteBody: (imageUrl) => ({
    imageId: imageUrl.split("/").pop(),
    timestamp: Date.now()
  }),
  onUploadSuccess: (url) => console.log("Uploaded:", url),
  onUploadError: (error) => console.error("Upload failed:", error),
  onDeleteStart: () => console.log("Starting deletion..."),
  onDeleteSuccess: () => console.log("Image deleted successfully")
};

API Requirements

Your API should support:

Upload: Accept multipart/form-data with the file attached
Delete: Accept requests with customizable method and body
Response: Return the image URL in the specified responsePath

Styling & Customization

Color Palette Configuration:

interface ColorPalette {
  primary: string;      // Edit button background color
  error: string;        // Delete button background color
  progress: string;     // Progress ring/percentage color
  placeholder: string;  // Placeholder SVG color
  text: string;         // Progress percentage text color
  textDisabled: string; // Disabled button text/icon color
}

Styling Examples

// Modern Blue Theme
const colors = {
  primary: "#3B82F6",
  error: "#EF4444",
  progress: "#10B981",
  placeholder: "#9CA3AF",
  text: "#FFFFFF",
  textDisabled: "#D1D5DB"
};

// Dark Theme
const darkColors = {
  primary: "#8B5CF6",
  error: "#F43F5E",
  progress: "#06D6A0",
  placeholder: "#6B7280",
  text: "#1F2937",
  textDisabled: "#4B5563"
};

Component Types & Sizes

Profile Type

Circular image with ring progress indicator. Ideal for user avatars and profile pictures.

Rectangle Type

Rectangular image with percentage progress bar. Perfect for general image uploads.

// Profile (Circular)
<PictureSelector type="profile" size={150} />

// Rectangle
<PictureSelector type="rectangle" size={200} />

Tailwind CSS Compatible

The component uses Tailwind CSS classes by default, but you can override any style using the color palette and additionalClassNames props.