Framework Components

Qwik

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

The @pichaflow/qwik package provides a high-performance upload component optimized for Qwik's resumability.

Usage

import { component$, $ } from '@builder.io/qwik';
import { PichaUpload } from '@pichaflow/qwik';

export default component$(() => {
  const onUploadSuccess$ = $((response) => {
    console.log('Uploaded to Edge:', response.url);
  });

  return (
    <PichaUpload
      useSecure={true}
      signatureUrl="/api/media/v1/upload/sign"
      tags={['ecommerce', 'qwik']}
      onSuccess$={onUploadSuccess$}
    />
  );
});

Props

Prop	Type	Default	Description
`apiKey`	`string`	`undefined`	Optional if using `signatureUrl` or `customUploadEndpoint`. Your PichaFlow Secret Key (`sk_live_...`). Note: Exposing your secret key on the frontend is insecure; use `signatureUrl` instead.
`useSecure`	`boolean`	`false`	Enable the HMAC-SHA256 handshake flow for secure browser uploads.
`signatureUrl`	`string`	`undefined`	The endpoint on your backend that signs the upload request (Required if `useSecure` is true). Must return a JSON object with `signature`, `timestamp`, `tenantId`, `directory`, `maxSize`, and `allowedTypes`.
`customUploadEndpoint`	`string`	`undefined`	A complete URL to a proxy endpoint for upload bypassing PichaFlow Edge Engine completely.
`baseUrl`	`string`	`https://api.pichaflow.com`	Optional API base URL.
`tags`	`string[]`	`[]`	Tags to apply to the upload.

Events (QRLs)

Qwik events use the $ suffix to indicate they are lazy-loadable.

Prop	Type	Description
`onSuccess$`	`PropFunction`	Fired when upload completes successfully.
`onError$`	`PropFunction`	Fired on network or server errors.

!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.

Edit this pageorReport an issue

Flutter

Integrate PichaFlow into your Flutter applications.

React

Integrate PichaFlow into your React and Next.js applications.