@uploadista/vue 0.0.20-beta.1 → 0.0.20-beta.3

package/src/components/FlowUploadZone.vue

@@ -1,305 +0,0 @@
-<script setup lang="ts">
-/**
- * FlowUploadZone - Upload zone with flow processing pipeline
- *
- * Specialized upload component that uploads files through a flow pipeline for processing.
- * Supports drag-and-drop and file picker with flow configuration. Emits events for flow
- * completion, errors, and upload status changes.
- *
- * @component
- * @example
- * // Upload images through image processing flow
- * <FlowUploadZone
- *   :flow-config="{ flowId: 'image-processor' }"
- *   accept="image/*"
- *   @upload-complete="handleFlowResult"
- *   @upload-error="handleError"
- * />
- *
- * @example
- * // With custom slot content
- * <FlowUploadZone
- *   :flow-config="{ flowId: 'image-processor' }"
- *   @upload-complete="handleResult"
- * >
- *   <template #default="{ isDragging, isProcessing, progress }">
- *     <div :class="{ processing: isProcessing }">
- *       <p v-if="isProcessing">Processing... {{ progress }}%</p>
- *       <p v-else-if="isDragging">Drop file here</p>
- *       <p v-else>Drag file here for processing</p>
- *     </div>
- *   </template>
- * </FlowUploadZone>
- *
- * @emits upload-complete - Flow processing completed with results
- * @emits upload-error - Upload or processing failed
- * @emits upload-start - File upload started
- * @emits validation-error - File validation failed
- */
-import type {
-  FlowUploadConfig,
-  FlowUploadOptions,
-} from "@uploadista/client-browser";
-import { computed, ref } from "vue";
-import { useDragDrop, useFlowUpload } from "../composables";
-
-/**
- * Props for the FlowUploadZone component
- * @property {FlowUploadConfig} flowConfig - Flow configuration with flowId
- * @property {FlowUploadOptions} options - Additional flow upload options
- * @property {string} accept - Accepted file types (single MIME type or extension string)
- * @property {boolean} multiple - Allow multiple files (default: false, flow uploads are single-file)
- * @property {boolean} disabled - Disable the upload zone (default: false)
- * @property {number} maxFileSize - Maximum file size in bytes
- */
-export interface FlowUploadZoneProps {
-  /**
-   * Flow configuration
-   */
-  flowConfig: FlowUploadConfig;
-
-  /**
-   * Additional flow upload options
-   */
-  options?: Omit<FlowUploadOptions, "flowConfig">;
-
-  /**
-   * Accepted file types (single MIME type or extension string)
-   */
-  accept?: string;
-
-  /**
-   * Whether to allow multiple files (currently only single file supported for flow uploads)
-   */
-  multiple?: boolean;
-
-  /**
-   * Whether the upload zone is disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * Maximum file size in bytes
-   */
-  maxFileSize?: number;
-}
-
-const props = withDefaults(defineProps<FlowUploadZoneProps>(), {
-  multiple: false,
-  disabled: false,
-});
-
-// biome-ignore lint/suspicious/noExplicitAny: Flow result can be any type
-const emit = defineEmits<{
-  // biome-ignore lint/suspicious/noExplicitAny: Flow result can be any type
-  "upload-complete": [result: any];
-  "upload-error": [error: Error];
-  "upload-start": [file: File];
-  "validation-error": [errors: string[]];
-}>();
-
-// biome-ignore lint/suspicious/noExplicitAny: Vue slot definition requires any
-defineSlots<{
-  // biome-ignore lint/suspicious/noExplicitAny: Vue slot definition requires any
-  default(props: {
-    isDragging: boolean;
-    isOver: boolean;
-    isUploading: boolean;
-    isProcessing: boolean;
-    progress: number;
-    status: string;
-    errors: string[];
-    openFilePicker: () => void;
-  }): any;
-}>();
-
-// Initialize flow upload
-const flowUpload = useFlowUpload({
-  ...props.options,
-  flowConfig: props.flowConfig,
-  onFlowComplete: (outputs) => {
-    emit("upload-complete", outputs);
-    props.options?.onFlowComplete?.(outputs);
-  },
-  onError: (error) => {
-    emit("upload-error", error);
-    props.options?.onError?.(error);
-  },
-});
-
-// Handle files received from drag-drop or file picker
-const handleFilesReceived = (files: File[]) => {
-  const file = files[0];
-  if (file) {
-    emit("upload-start", file);
-    flowUpload.upload(file);
-  }
-};
-
-// Handle validation errors
-const handleValidationError = (errors: string[]) => {
-  emit("validation-error", errors);
-};
-
-// Initialize drag-drop
-const dragDrop = useDragDrop({
-  accept: props.accept ? [props.accept] : undefined,
-  multiple: props.multiple,
-  maxFileSize: props.maxFileSize,
-  onFilesReceived: handleFilesReceived,
-  onValidationError: handleValidationError,
-});
-
-// File input ref
-const fileInputRef = ref<HTMLInputElement>();
-
-// Open file picker
-// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
-const openFilePicker = () => {
-  if (!props.disabled) {
-    fileInputRef.value?.click();
-  }
-};
-
-// Computed states
-// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
-const isActive = computed(
-  () => dragDrop.state.value.isDragging || dragDrop.state.value.isOver,
-);
-</script>
-
-<template>
-  <div
-    class="flow-upload-zone"
-    :class="{
-      'flow-upload-zone--active': isActive,
-      'flow-upload-zone--disabled': disabled,
-      'flow-upload-zone--uploading': flowUpload.isUploading.value
-    }"
-    @dragenter="!disabled && dragDrop.onDragEnter"
-    @dragover="!disabled && dragDrop.onDragOver"
-    @dragleave="!disabled && dragDrop.onDragLeave"
-    @drop="!disabled && dragDrop.onDrop"
-    @click="openFilePicker"
-    role="button"
-    :tabindex="disabled ? -1 : 0"
-    :aria-disabled="disabled"
-    aria-label="Upload file with flow processing"
-    @keydown.enter="openFilePicker"
-    @keydown.space.prevent="openFilePicker"
-  >
-    <slot
-      :is-dragging="dragDrop.state.value.isDragging"
-      :is-over="dragDrop.state.value.isOver"
-      :is-uploading="flowUpload.isUploading.value"
-      :is-processing="flowUpload.isProcessing.value"
-      :progress="flowUpload.state.value.progress"
-      :status="flowUpload.state.value.status"
-      :errors="[...dragDrop.state.value.errors]"
-      :open-file-picker="openFilePicker"
-    >
-      <!-- Default slot content -->
-      <div class="flow-upload-zone__content">
-        <p v-if="dragDrop.state.value.isDragging">Drop file here...</p>
-        <p v-else-if="flowUpload.isUploading.value">
-          Uploading... {{ flowUpload.state.value.progress }}%
-        </p>
-        <p v-else-if="flowUpload.isProcessing.value">
-          Processing...
-          <span v-if="flowUpload.state.value.currentNodeName">
-            ({{ flowUpload.state.value.currentNodeName }})
-          </span>
-        </p>
-        <p v-else-if="flowUpload.state.value.status === 'success'">Upload complete!</p>
-        <p v-else-if="flowUpload.state.value.status === 'error'" class="flow-upload-zone__error">
-          Error: {{ flowUpload.state.value.error?.message }}
-        </p>
-        <p v-else>Drag a file here or click to select</p>
-
-        <div v-if="flowUpload.isUploading.value" class="flow-upload-zone__progress">
-          <div class="flow-upload-zone__progress-bar">
-            <div
-              class="flow-upload-zone__progress-fill"
-              :style="{ width: `${flowUpload.state.value.progress}%` }"
-            />
-          </div>
-        </div>
-
-        <div v-if="dragDrop.state.value.errors.length > 0" class="flow-upload-zone__errors">
-          <p v-for="(error, index) in dragDrop.state.value.errors" :key="index">
-            {{ error }}
-          </p>
-        </div>
-      </div>
-    </slot>
-
-    <input
-      ref="fileInputRef"
-      type="file"
-      :multiple="dragDrop.inputProps.value.multiple"
-      :accept="dragDrop.inputProps.value.accept"
-      :disabled="disabled"
-      @change="dragDrop.onInputChange"
-      style="display: none"
-      aria-hidden="true"
-    />
-  </div>
-</template>
-
-<style scoped>
-.flow-upload-zone {
-  cursor: pointer;
-  user-select: none;
-}
-
-.flow-upload-zone--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.flow-upload-zone--uploading {
-  pointer-events: none;
-}
-
-.flow-upload-zone__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.flow-upload-zone__error {
-  color: #dc3545;
-}
-
-.flow-upload-zone__progress {
-  width: 100%;
-  max-width: 300px;
-  margin-top: 0.5rem;
-}
-
-.flow-upload-zone__progress-bar {
-  width: 100%;
-  height: 0.5rem;
-  background-color: #e0e0e0;
-  border-radius: 0.25rem;
-  overflow: hidden;
-}
-
-.flow-upload-zone__progress-fill {
-  height: 100%;
-  background-color: #007bff;
-  transition: width 0.2s ease;
-}
-
-.flow-upload-zone__errors {
-  margin-top: 0.5rem;
-  color: #dc3545;
-  font-size: 0.875rem;
-}
-
-.flow-upload-zone__errors p {
-  margin: 0.25rem 0;
-}
-</style>

package/src/composables/useFlowUpload.ts

@@ -1,230 +0,0 @@
-import type { FlowUploadOptions } from "@uploadista/client-browser";
-import type {
-  FlowManager,
-  FlowUploadState,
-  FlowUploadStatus,
-} from "@uploadista/client-core";
-import type { TypedOutput } from "@uploadista/core/flow";
-import { computed, onMounted, onUnmounted, readonly, ref } from "vue";
-import { useFlowManagerContext } from "./useFlowManagerContext";
-
-// Re-export types from core for convenience
-export type { FlowUploadState, FlowUploadStatus };
-
-export interface UseFlowUploadOptions {
-  /**
-   * Flow configuration
-   */
-  flowConfig: FlowUploadOptions["flowConfig"];
-
-  /**
-   * Called when upload progress updates
-   */
-  onProgress?: (
-    progress: number,
-    bytesUploaded: number,
-    totalBytes: number | null,
-  ) => void;
-
-  /**
-   * Called when a chunk completes
-   */
-  onChunkComplete?: (
-    chunkSize: number,
-    bytesAccepted: number,
-    bytesTotal: number | null,
-  ) => void;
-
-  /**
-   * Called when the flow completes successfully (receives full flow outputs)
-   * This is the recommended callback for multi-output flows
-   * Format: { [outputNodeId]: result, ... }
-   */
-  onFlowComplete?: (outputs: Record<string, unknown>) => void;
-
-  /**
-   * Called when upload succeeds (receives typed outputs from all output nodes)
-   * Each output includes nodeId, optional nodeType, data, and timestamp.
-   *
-   * @param outputs - Array of typed outputs from all output nodes
-   */
-  onSuccess?: (outputs: TypedOutput[]) => void;
-
-  /**
-   * Called when upload fails
-   */
-  onError?: (error: Error) => void;
-
-  /**
-   * Called when upload is aborted
-   */
-  onAbort?: () => void;
-
-  /**
-   * Custom retry logic
-   */
-  onShouldRetry?: (error: Error, retryAttempt: number) => boolean;
-}
-
-const initialState: FlowUploadState = {
-  status: "idle",
-  progress: 0,
-  bytesUploaded: 0,
-  totalBytes: null,
-  error: null,
-  jobId: null,
-  flowStarted: false,
-  currentNodeName: null,
-  currentNodeType: null,
-  flowOutputs: null,
-};
-
-/**
- * Vue composable for uploading files through a flow.
- *
- * This composable provides a simple interface for uploading files through a flow.
- * The flow handles the upload process and can perform post-processing like
- * saving to storage, optimizing images, etc.
- *
- * Must be used within FlowManagerProvider (which must be within UploadistaProvider).
- * Flow events are automatically routed by the provider to the appropriate manager.
- *
- * @example
- * ```vue
- * <script setup lang="ts">
- * import { useFlowUpload } from '@uploadista/vue';
- *
- * const flowUpload = useFlowUpload({
- *   flowConfig: {
- *     flowId: "my-upload-flow",
- *     storageId: "my-storage",
- *   },
- *   onSuccess: (outputs) => {
- *     console.log("Flow outputs:", outputs);
- *     for (const output of outputs) {
- *       console.log(`${output.nodeId}:`, output.data);
- *     }
- *   },
- * });
- *
- * const handleFileChange = (event: Event) => {
- *   const file = (event.target as HTMLInputElement).files?.[0];
- *   if (file) flowUpload.upload(file);
- * };
- * </script>
- *
- * <template>
- *   <input type="file" @change="handleFileChange" />
- * </template>
- * ```
- */
-export function useFlowUpload(options: UseFlowUploadOptions) {
-  const { getManager, releaseManager } = useFlowManagerContext();
-  const state = ref<FlowUploadState>(initialState);
-  let manager: FlowManager<unknown> | null = null;
-
-  // Store latest options in a ref to access in callbacks
-  const optionsRef = ref(options);
-
-  // Get or create manager from context when component mounts
-  onMounted(() => {
-    const flowId = options.flowConfig.flowId;
-
-    // Create stable callback wrappers
-    const stableCallbacks = {
-      onStateChange: (newState: FlowUploadState) => {
-        state.value = newState;
-      },
-      onProgress: (
-        _uploadId: string,
-        bytesUploaded: number,
-        totalBytes: number | null,
-      ) => {
-        if (optionsRef.value.onProgress) {
-          const progress = totalBytes
-            ? Math.round((bytesUploaded / totalBytes) * 100)
-            : 0;
-          optionsRef.value.onProgress(progress, bytesUploaded, totalBytes);
-        }
-      },
-      onChunkComplete: (
-        chunkSize: number,
-        bytesAccepted: number,
-        bytesTotal: number | null,
-      ) => {
-        optionsRef.value.onChunkComplete?.(
-          chunkSize,
-          bytesAccepted,
-          bytesTotal,
-        );
-      },
-      onFlowComplete: (outputs: TypedOutput[]) => {
-        optionsRef.value.onFlowComplete?.(
-          outputs as unknown as Record<string, unknown>,
-        );
-      },
-      onSuccess: (outputs: TypedOutput[]) => {
-        optionsRef.value.onSuccess?.(outputs);
-      },
-      onError: (error: Error) => {
-        optionsRef.value.onError?.(error);
-      },
-      onAbort: () => {
-        optionsRef.value.onAbort?.();
-      },
-    };
-
-    // Get manager from context
-    manager = getManager(flowId, stableCallbacks, {
-      flowConfig: options.flowConfig,
-      onChunkComplete: options.onChunkComplete,
-      onFlowComplete: options.onFlowComplete as
-        | ((outputs: TypedOutput[]) => void)
-        | undefined,
-      onSuccess: options.onSuccess,
-      onError: options.onError,
-      onAbort: options.onAbort,
-      onShouldRetry: options.onShouldRetry,
-    });
-  });
-
-  // Cleanup on unmount
-  onUnmounted(() => {
-    if (manager) {
-      releaseManager(options.flowConfig.flowId);
-      manager = null;
-    }
-  });
-
-  const upload = async (file: File | Blob) => {
-    await manager?.upload(file);
-  };
-
-  const abort = () => {
-    manager?.abort();
-  };
-
-  const pause = () => {
-    manager?.pause();
-  };
-
-  const reset = () => {
-    manager?.reset();
-  };
-
-  return {
-    state: readonly(state),
-    upload,
-    abort,
-    pause,
-    reset,
-    // Derive computed values from state (reactive to state changes)
-    isUploading: computed(
-      () =>
-        state.value.status === "uploading" ||
-        state.value.status === "processing",
-    ),
-    isUploadingFile: computed(() => state.value.status === "uploading"),
-    isProcessing: computed(() => state.value.status === "processing"),
-  };
-}