Framework Components

React

Integrate PichaFlow into your React and Next.js applications.

The @pichaflow/react package provides a functional upload component.

Usage

import { PichaUpload } from '@pichaflow/react';

export default function MyPage() {
  const handleSuccess = (res) => {
    console.log('Upload complete:', res.id);
  };

  return (
    <PichaUpload
      useSecure={true}
      signatureUrl="/api/media/v1/upload/sign"
      onSuccess={handleSuccess}
      className="my-custom-dropzone"
    />
  );
}

Props

PropTypeDefaultDescription
apiKeystringundefinedOptional if using signatureUrl or customUploadEndpoint. Your PichaFlow Secret Key (sk_live_...). Note: Exposing your secret key on the frontend is insecure; use signatureUrl instead.
useSecurebooleanfalseEnable the HMAC-SHA256 handshake flow for secure browser uploads.
signatureUrlstring-Your backend endpoint for signing the upload request (Required if useSecure is true). Must return a JSON object with signature, timestamp, tenantId, directory, maxSize, and allowedTypes.
customUploadEndpointstringundefinedA complete URL to a proxy endpoint for upload bypassing PichaFlow Edge Engine completely.
onSuccessfunction-Callback for successful uploads.
onErrorfunction-Callback for failed uploads.
onProgressfunction-Callback for progress updates.

!CAUTIONAuthentication Check Required: You must secure your backend signatureUrl endpoint with appropriate session or token authentication middleware. If this route is left public and unauthenticated, any user or bot can request valid signatures to upload files directly to your account, risking billing spikes or bucket abuse.

!NOTESignature Response Contract: Your signatureUrl endpoint must return a JSON body with the following fields. The component uses all of them to construct the five X-Picha-* headers sent to the Edge Engine:

{
  "signature":    "<hmac-sha256-hex>",
  "timestamp":    1234567890000,
  "tenantId":     "pf_prj_...",
  "directory":    "products/summer/",
  "maxSize":      "5242880",
  "allowedTypes": "image/webp,image/jpeg"
}

See HTTP API → Client-Side Upload Signatures for the full HMAC construction guide.

Next.js Image Integration

The @pichaflow/react package exports a custom loader function compatible with Next.js's built-in next/image component. This allows you to route Next.js image optimization tasks directly through the PichaFlow CDN edge.

Per-Image Loader

Pass the pichaflowLoader helper to the <Image> component's loader prop:

import Image from 'next/image';
import { pichaflowLoader } from '@pichaflow/react';

export default function Profile() {
  return (
    <Image
      loader={pichaflowLoader}
      src="/user/avatar.png"
      width={400}
      height={300}
      alt="User Profile"
    />
  );
}

Custom Base URL Loader

If you route your CDN traffic through a custom domain or reverse proxy, configure a custom loader using createPichaflowLoader:

import Image from 'next/image';
import { createPichaflowLoader } from '@pichaflow/react';

const myCustomLoader = createPichaflowLoader({
  baseURL: 'https://images.mycompany.com'
});

export default function CustomProfile() {
  return (
    <Image
      loader={myCustomLoader}
      src="/user/avatar.png"
      width={400}
      height={300}
      alt="User Profile"
    />
  );
}

Qwik

Integrate PichaFlow into your Qwik applications with fine-grained reactivity.

Svelte

Integrate PichaFlow into your Svelte and SvelteKit applications with ease.