diff --git a/src/composables/node/useNodeImageUpload.ts b/src/composables/node/useNodeImageUpload.ts index b8415cb3d..2abf3b706 100644 --- a/src/composables/node/useNodeImageUpload.ts +++ b/src/composables/node/useNodeImageUpload.ts @@ -3,15 +3,29 @@ 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 -const uploadFile = async (file: File, isPasted: boolean) => { +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 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', @@ -36,6 +50,11 @@ interface ImageUploadOptions { * @example 'image/png,image/jpeg,image/webp,video/webm,video/mp4' */ accept?: string + /** + * The folder to upload the file to. + * @example 'input', 'output', 'temp' + */ + folder?: ResultItemType } /** @@ -53,7 +72,9 @@ export const useNodeImageUpload = ( const handleUpload = async (file: File) => { try { - const path = await uploadFile(file, isPastedFile(file)) + const path = await uploadFile(file, isPastedFile(file), { + type: options.folder + }) if (!path) return return path } catch (error) { diff --git a/src/composables/widgets/useImageUploadWidget.ts b/src/composables/widgets/useImageUploadWidget.ts index 7770b5437..137b2f42c 100644 --- a/src/composables/widgets/useImageUploadWidget.ts +++ b/src/composables/widgets/useImageUploadWidget.ts @@ -5,7 +5,7 @@ import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage' import { useNodeImageUpload } from '@/composables/node/useNodeImageUpload' import { useValueTransform } from '@/composables/useValueTransform' import { t } from '@/i18n' -import type { ResultItem } from '@/schemas/apiSchema' +import type { ResultItem, ResultItemType } from '@/schemas/apiSchema' import type { InputSpec } from '@/schemas/nodeDefSchema' import type { ComfyWidgetConstructor } from '@/scripts/widgets' import { useNodeOutputStore } from '@/stores/imagePreviewStore' @@ -42,6 +42,7 @@ export const useImageUploadWidget = () => { const inputOptions = inputData[1] const { imageInputName, allow_batch, image_folder = 'input' } = inputOptions + const folder: ResultItemType | undefined = image_folder const nodeOutputStore = useNodeOutputStore() const isAnimated = !!inputOptions.animated_image_upload @@ -75,6 +76,7 @@ export const useImageUploadWidget = () => { allow_batch, fileFilter, accept, + folder, onUploadComplete: (output) => { output.forEach((path) => addToComboValues(fileComboWidget, path)) // @ts-expect-error litegraph combo value type does not support arrays yet