From d5ecfb2c99f9ec855828a0d9ae8b5df43d34adb0 Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Sun, 15 Jun 2025 12:17:54 -0700 Subject: [PATCH] Revert "[refactor] Refactor and type image upload options" (#4190) --- src/composables/node/useNodeImageUpload.ts | 18 ++---------------- .../widgets/useImageUploadWidget.ts | 9 ++++++--- src/extensions/core/uploadAudio.ts | 5 +++-- src/schemas/apiSchema.ts | 4 +--- src/schemas/nodeDefSchema.ts | 11 ++--------- src/stores/imagePreviewStore.ts | 10 +++------- 6 files changed, 17 insertions(+), 40 deletions(-) diff --git a/src/composables/node/useNodeImageUpload.ts b/src/composables/node/useNodeImageUpload.ts index 97d9b4ca9..b8415cb3d 100644 --- a/src/composables/node/useNodeImageUpload.ts +++ b/src/composables/node/useNodeImageUpload.ts @@ -3,29 +3,15 @@ import type { LGraphNode } from '@comfyorg/litegraph' import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop' import { useNodeFileInput } from '@/composables/node/useNodeFileInput' import { useNodePaste } from '@/composables/node/useNodePaste' -import type { ResultItemType } from '@/schemas/apiSchema' import { api } from '@/scripts/api' import { useToastStore } from '@/stores/toastStore' const PASTED_IMAGE_EXPIRY_MS = 2000 -interface ImageUploadFormFields { - /** - * The folder to upload the file to. - * @example 'input', 'output', 'temp' - */ - type: ResultItemType -} - -const uploadFile = async ( - file: File, - isPasted: boolean, - formFields: Partial = {} -) => { +const uploadFile = async (file: File, isPasted: boolean) => { const body = new FormData() body.append('image', file) if (isPasted) body.append('subfolder', 'pasted') - if (formFields.type) body.append('type', formFields.type) const resp = await api.fetchApi('/upload/image', { method: 'POST', @@ -67,7 +53,7 @@ export const useNodeImageUpload = ( const handleUpload = async (file: File) => { try { - const path = await uploadFile(file, isPastedFile(file), {}) + const path = await uploadFile(file, isPastedFile(file)) if (!path) return return path } catch (error) { diff --git a/src/composables/widgets/useImageUploadWidget.ts b/src/composables/widgets/useImageUploadWidget.ts index f468f1d3f..3f8afeeb7 100644 --- a/src/composables/widgets/useImageUploadWidget.ts +++ b/src/composables/widgets/useImageUploadWidget.ts @@ -6,7 +6,7 @@ import { useNodeImageUpload } from '@/composables/node/useNodeImageUpload' import { useValueTransform } from '@/composables/useValueTransform' import { t } from '@/i18n' import type { ResultItem } from '@/schemas/apiSchema' -import type { ComboInputOptions, InputSpec } from '@/schemas/nodeDefSchema' +import type { InputSpec } from '@/schemas/nodeDefSchema' import type { ComfyWidgetConstructor } from '@/scripts/widgets' import { useNodeOutputStore } from '@/stores/imagePreviewStore' import { createAnnotatedPath } from '@/utils/formatUtil' @@ -33,7 +33,7 @@ export const useImageUploadWidget = () => { inputName: string, inputData: InputSpec ) => { - const inputOptions = (inputData[1] ?? {}) as ComboInputOptions + const inputOptions = inputData[1] ?? {} const { imageInputName, allow_batch, image_folder = 'input' } = inputOptions const nodeOutputStore = useNodeOutputStore() @@ -43,9 +43,11 @@ export const useImageUploadWidget = () => { const { showPreview } = isVideo ? useNodeVideo(node) : useNodeImage(node) const fileFilter = isVideo ? isVideoFile : isImageFile - const fileComboWidget = findFileComboWidget(node, imageInputName ?? '') + // @ts-expect-error InputSpec is not typed correctly + const fileComboWidget = findFileComboWidget(node, imageInputName) const initialFile = `${fileComboWidget.value}` const formatPath = (value: InternalFile) => + // @ts-expect-error InputSpec is not typed correctly createAnnotatedPath(value, { rootFolder: image_folder }) const transform = (internalValue: InternalValue): ExposedValue => { @@ -65,6 +67,7 @@ export const useImageUploadWidget = () => { // Setup file upload handling const { openFileSelection } = useNodeImageUpload(node, { + // @ts-expect-error InputSpec is not typed correctly allow_batch, fileFilter, accept, diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts index 94a16d04d..54c90ed0b 100644 --- a/src/extensions/core/uploadAudio.ts +++ b/src/extensions/core/uploadAudio.ts @@ -5,7 +5,6 @@ import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop' import { useNodeFileInput } from '@/composables/node/useNodeFileInput' import { useNodePaste } from '@/composables/node/useNodePaste' import { t } from '@/i18n' -import type { ResultItemType } from '@/schemas/apiSchema' import type { ComfyNodeDef } from '@/schemas/nodeDefSchema' import type { DOMWidget } from '@/scripts/domWidget' import { useToastStore } from '@/stores/toastStore' @@ -13,6 +12,8 @@ import { useToastStore } from '@/stores/toastStore' import { api } from '../../scripts/api' import { app } from '../../scripts/app' +type FolderType = 'input' | 'output' | 'temp' + function splitFilePath(path: string): [string, string] { const folder_separator = path.lastIndexOf('/') if (folder_separator === -1) { @@ -27,7 +28,7 @@ function splitFilePath(path: string): [string, string] { function getResourceURL( subfolder: string, filename: string, - type: ResultItemType = 'input' + type: FolderType = 'input' ): string { const params = [ 'filename=' + encodeURIComponent(filename), diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts index f3720ba2b..a6d8eee27 100644 --- a/src/schemas/apiSchema.ts +++ b/src/schemas/apiSchema.ts @@ -8,16 +8,14 @@ import { zKeybinding } from '@/schemas/keyBindingSchema' import { NodeBadgeMode } from '@/types/nodeSource' import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes' -export const resultItemType = z.enum(['input', 'output', 'temp']) const zNodeType = z.string() const zQueueIndex = z.number() const zPromptId = z.string() const zResultItem = z.object({ filename: z.string().optional(), subfolder: z.string().optional(), - type: resultItemType.optional() + type: z.string().optional() }) -export type ResultItemType = z.infer export type ResultItem = z.infer const zOutputs = z .object({ diff --git a/src/schemas/nodeDefSchema.ts b/src/schemas/nodeDefSchema.ts index de1ce10c6..928e05845 100644 --- a/src/schemas/nodeDefSchema.ts +++ b/src/schemas/nodeDefSchema.ts @@ -1,8 +1,6 @@ import { z } from 'zod' import { fromZodError } from 'zod-validation-error' -import { resultItemType } from './apiSchema' - const zComboOption = z.union([z.string(), z.number()]) const zRemoteWidgetConfig = z.object({ route: z.string().url().or(z.string().startsWith('/')), @@ -74,19 +72,14 @@ export const zStringInputOptions = zBaseInputOptions.extend({ export const zComboInputOptions = zBaseInputOptions.extend({ control_after_generate: z.boolean().optional(), image_upload: z.boolean().optional(), - image_folder: resultItemType.optional(), + image_folder: z.enum(['input', 'output', 'temp']).optional(), allow_batch: z.boolean().optional(), video_upload: z.boolean().optional(), animated_image_upload: z.boolean().optional(), options: z.array(zComboOption).optional(), remote: zRemoteWidgetConfig.optional(), /** Whether the widget is a multi-select widget. */ - multi_select: zMultiSelectOption.optional(), - /** - * The name of the image upload input (filename combo) if it exists - * @example 'image' - */ - imageInputName: z.string().optional() + multi_select: zMultiSelectOption.optional() }) const zIntInputSpec = z.tuple([z.literal('INT'), zIntInputOptions.optional()]) diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts index b6d88c9bb..83f5f8bcd 100644 --- a/src/stores/imagePreviewStore.ts +++ b/src/stores/imagePreviewStore.ts @@ -1,11 +1,7 @@ import { LGraphNode } from '@comfyorg/litegraph' import { defineStore } from 'pinia' -import { - ExecutedWsMessage, - ResultItem, - ResultItemType -} from '@/schemas/apiSchema' +import { ExecutedWsMessage, ResultItem } from '@/schemas/apiSchema' import { api } from '@/scripts/api' import { app } from '@/scripts/app' import { parseFilePath } from '@/utils/formatUtil' @@ -13,7 +9,7 @@ import { isVideoNode } from '@/utils/litegraphUtil' const createOutputs = ( filenames: string[], - type: ResultItemType, + type: string, isAnimated: boolean ): ExecutedWsMessage['output'] => { return { @@ -92,7 +88,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => { { folder = 'input', isAnimated = false - }: { folder?: ResultItemType; isAnimated?: boolean } = {} + }: { folder?: string; isAnimated?: boolean } = {} ) { if (!filenames || !node) return