talizen 0.1.0 → 0.1.2

package/README.md

@@ -23,6 +23,9 @@ import { setTalizenConfig } from "talizen/core"
 
 setTalizenConfig({
   baseUrl: "https://www.talizen.com",
+  onFileUploadProcess(key, process) {
+    console.log(key, process)
+  },
 })
 ```
 
@@ -74,6 +77,13 @@ await submitForm("contact-form", {
 })
 ```
 
+When a `File` object appears in the payload, `submitForm()` will:
+
+1. Call `POST /form/:key/file/preupload`
+2. If `hash_exist` is `false`, upload the file to the returned S3 signed URL
+3. Replace the original `File` value with the returned `file_url`
+4. Submit the final payload to `/form/:key/submit`
+
 ## Package Layout
 
 - `talizen/core`: shared runtime config, request helpers, and base data types.

package/core.d.ts

@@ -11,10 +11,12 @@ export interface ImgItem {
     width?: number;
 }
 export type Image = ImgItem[] | ImgItem;
+export type TalizenFileUploadProcessCallback = (key: string, process: number) => void;
 export interface TalizenClientConfig {
     baseUrl?: string;
     headers?: HeadersInit;
     fetch?: typeof fetch;
+    onFileUploadProcess?: TalizenFileUploadProcessCallback;
 }
 export interface TalizenRequestOptions extends TalizenClientConfig {
     signal?: AbortSignal;

package/form.js

@@ -1,9 +1,158 @@
-import { requestJson } from "./core.js";
+import { requestJson, resolveTalizenConfig } from "./core.js";
 export async function submitForm(keyOrToken, payload, options) {
-    return requestJson(`/form/${keyOrToken}/submit`, {
+    const formKey = getFormKey(keyOrToken);
+    const data = await replaceFiles(formKey, payload, "", options);
+    return requestJson(`/form/${formKey}/submit`, {
         method: "POST",
         body: JSON.stringify({
-            data: payload,
+            data,
         }),
     }, options);
 }
+function getFormKey(keyOrToken) {
+    if (keyOrToken == null || keyOrToken === "") {
+        throw new Error("Talizen form key is required.");
+    }
+    return keyOrToken;
+}
+async function replaceFiles(formKey, value, path, options) {
+    if (isFile(value)) {
+        return uploadFile(formKey, path || value.name, value, options);
+    }
+    if (Array.isArray(value)) {
+        return Promise.all(value.map((item, index) => replaceFiles(formKey, item, joinPath(path, String(index)), options)));
+    }
+    if (isPlainObject(value)) {
+        const entries = await Promise.all(Object.entries(value).map(async ([key, item]) => [key, await replaceFiles(formKey, item, joinPath(path, key), options)]));
+        return Object.fromEntries(entries);
+    }
+    return value;
+}
+async function uploadFile(formKey, fieldKey, file, options) {
+    const resolved = resolveTalizenConfig(options);
+    notifyUploadProcess(resolved, fieldKey, 0);
+    const preupload = await requestJson(`/form/${formKey}/file/preupload`, {
+        method: "POST",
+        body: JSON.stringify({
+            file_name: file.name,
+            hash: await sha256(file),
+            mimetype: file.type || "application/octet-stream",
+            file_size: file.size,
+        }),
+    }, options);
+    const target = normalizePreuploadResponse(preupload);
+    await uploadToSignedUrl(target, file, fieldKey, resolved);
+    notifyUploadProcess(resolved, fieldKey, 1);
+    return target.fileUrl;
+}
+function normalizePreuploadResponse(response) {
+    const hashExist = response.hash_exist === true;
+    const uploadUrl = getString(response.presigned_url);
+    const fileUrl = getString(response.file_url);
+    if (fileUrl == null) {
+        throw new Error("Talizen preupload response is missing file_url.");
+    }
+    if (!hashExist && uploadUrl == null) {
+        throw new Error("Talizen preupload response is missing presigned_url.");
+    }
+    return {
+        hashExist,
+        uploadUrl,
+        fileUrl,
+    };
+}
+async function uploadToSignedUrl(target, file, fieldKey, options) {
+    if (target.hashExist || target.uploadUrl == null) {
+        return;
+    }
+    if (typeof XMLHttpRequest === "function") {
+        await uploadWithXhr(target, file, fieldKey, options);
+        return;
+    }
+    const resolved = resolveTalizenConfig(options);
+    const headers = new Headers();
+    const body = file;
+    if (file.type) {
+        headers.set("content-type", file.type);
+    }
+    const response = await resolved.fetch(target.uploadUrl, {
+        method: "PUT",
+        headers,
+        body,
+        signal: resolved.signal,
+    });
+    if (!response.ok) {
+        const text = await response.text();
+        throw new Error(`Talizen file upload failed: ${response.status} ${response.statusText} ${text}`.trim());
+    }
+}
+function uploadWithXhr(target, file, fieldKey, options) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        const signal = options.signal;
+        const body = file;
+        xhr.open("PUT", target.uploadUrl ?? "");
+        if (file.type) {
+            xhr.setRequestHeader("content-type", file.type);
+        }
+        xhr.upload.onprogress = (event) => {
+            if (event.lengthComputable) {
+                notifyUploadProcess(options, fieldKey, event.loaded / event.total);
+            }
+        };
+        xhr.onload = () => {
+            cleanup();
+            if (xhr.status >= 200 && xhr.status < 300) {
+                resolve();
+                return;
+            }
+            reject(new Error(`Talizen file upload failed: ${xhr.status} ${xhr.statusText} ${xhr.responseText}`.trim()));
+        };
+        xhr.onerror = () => {
+            cleanup();
+            reject(new Error("Talizen file upload failed: network error"));
+        };
+        xhr.onabort = () => {
+            cleanup();
+            reject(createAbortError());
+        };
+        const abort = () => xhr.abort();
+        const cleanup = () => signal?.removeEventListener("abort", abort);
+        signal?.addEventListener("abort", abort, { once: true });
+        xhr.send(body);
+    });
+}
+async function sha256(file) {
+    const subtle = globalThis.crypto?.subtle;
+    if (subtle == null) {
+        throw new Error("Talizen file upload requires Web Crypto support.");
+    }
+    const digest = await subtle.digest("SHA-256", await file.arrayBuffer());
+    return Array.from(new Uint8Array(digest), (value) => value.toString(16).padStart(2, "0")).join("");
+}
+function notifyUploadProcess(options, key, process) {
+    options?.onFileUploadProcess?.(key, clampProcess(process));
+}
+function clampProcess(process) {
+    return Math.min(1, Math.max(0, process));
+}
+function joinPath(parent, key) {
+    return parent === "" ? key : `${parent}.${key}`;
+}
+function isFile(value) {
+    return typeof File === "function" && value instanceof File;
+}
+function isPlainObject(value) {
+    return Object.prototype.toString.call(value) === "[object Object]";
+}
+function getString(value) {
+    return typeof value === "string" && value !== "" ? value : undefined;
+}
+function createAbortError() {
+    if (typeof DOMException === "function") {
+        return new DOMException("The operation was aborted.", "AbortError");
+    }
+    const error = new Error("The operation was aborted.");
+    error.name = "AbortError";
+    return error;
+}

package/index.d.ts

@@ -1,3 +1,73 @@
 export * from "./core.js";
 export * from "./cms.js";
 export * from "./form.js";
+type OneOrMany<T> = T | Array<T>;
+export interface MetadataTitle {
+    default?: string;
+    template?: string;
+    absolute?: string;
+}
+export interface MetadataAuthor {
+    name: string;
+    url?: string;
+}
+export interface MetadataIconLink {
+    url: string;
+    media?: string;
+    sizes?: string;
+    type?: string;
+}
+export interface MetadataOtherIcon {
+    rel: string;
+    url: string;
+}
+export interface MetadataIcons {
+    shortcut?: OneOrMany<string | MetadataIconLink>;
+    icon?: OneOrMany<string | MetadataIconLink>;
+    apple?: OneOrMany<string | MetadataIconLink>;
+    other?: MetadataOtherIcon | Array<MetadataOtherIcon>;
+}
+export interface OpenGraphImage {
+    url: string;
+    width?: number;
+    height?: number;
+    alt?: string;
+}
+export interface OpenGraphVideo {
+    url: string;
+    width?: number;
+    height?: number;
+}
+export interface OpenGraphAudio {
+    url: string;
+}
+export interface MetadataFormatDetection {
+    email?: boolean;
+    address?: boolean;
+    telephone?: boolean;
+}
+export interface OpenGraphMetadata {
+    title?: string;
+    description?: string;
+    url?: string;
+    siteName?: string;
+    images?: Array<OpenGraphImage>;
+    videos?: Array<OpenGraphVideo>;
+    audio?: Array<OpenGraphAudio>;
+    locale?: string;
+    type?: string;
+}
+export interface Metadata {
+    title?: string | MetadataTitle | null;
+    description?: string | null;
+    generator?: string | null;
+    applicationName?: string | null;
+    referrer?: string | null;
+    keywords?: string | Array<string> | null;
+    authors?: Array<MetadataAuthor> | null;
+    creator?: string | null;
+    publisher?: string | null;
+    formatDetection?: MetadataFormatDetection | null;
+    openGraph?: OpenGraphMetadata | null;
+    icons?: MetadataIcons | null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talizen",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Talizen frontend SDK types for cms, form and core.",
   "type": "module",
   "license": "MIT",