Framework Components

Svelte

Integrate PichaFlow into your Svelte and SvelteKit applications with ease.

The @pichaflow/svelte package provides a reactive upload component built specifically for Svelte.

Usage

<script>
  import { PichaUpload } from '@pichaflow/svelte';

  function handleSuccess(event) {
    const response = event.detail;
    console.log('Upload successful:', response.url);
  }
</script>

<PichaUpload
  useSecure={true}
  signatureUrl="/api/media/v1/upload/sign"
  tags={['ecommerce', 'svelte']}
  on:success={handleSuccess}
/>

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

Svelte events are emitted using the dispatch system.

Event	Payload	Description
`success`	`UploadResponse`	Fired when upload completes successfully.
`error`	`any`	Fired on network or server errors.
`progress`	`number`	Fired during upload progress updates.

!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

React

Integrate PichaFlow into your React and Next.js applications.

Vue

Integrate PichaFlow into your Vue and Nuxt applications.