Skip to content

File and File list #333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicosammito merged 3 commits into from
Aug 12, 2026
Merged

File and File list #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
09311dc
feat: update @code0-tech/triangulum to version 0.31.0
nicosammito Aug 12, 2026
373e8d5
feat: add DataTypeFileInputComponent for file input handling
nicosammito Aug 12, 2026
c37f6c7
feat: integrate DataTypeFileInputComponent into DataTypeInputComponen…
nicosammito Aug 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"dependencies": {
"@apollo/client": "^4.0.9",
"@code0-tech/pictor": "^0.15.0",
"@code0-tech/triangulum": "^0.30.2",
"@code0-tech/triangulum": "^0.31.0",
"@codemirror/lang-javascript": "^6.2.5",
"@codemirror/lint": "^6.9.5",
"@icons-pack/react-simple-icons": "^13.13.0",
Expand Down
7 changes: 7 additions & 0 deletions src/packages/ce/src/datatype/components/inputs/DataTypeInputComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {DataTypeSelectInputComponent} from "@edition/datatype/components/inputs/
import {InputWrapperProps} from "@code0-tech/pictor/dist/components/form/InputWrapper";
import {DataTypeNumberInputComponent} from "@edition/datatype/components/inputs/number/DataTypeNumberInputComponent";
import {DataTypeDateInputComponent} from "@edition/datatype/components/inputs/date/DataTypeDateInputComponent";
import {DataTypeFileInputComponent} from "@edition/datatype/components/inputs/file/DataTypeFileInputComponent";
import {DataTypeJSONInputComponent} from "@edition/datatype/components/inputs/json/DataTypeJSONInputComponent";
import {DataTypeGenericInputComponent} from "@edition/datatype/components/inputs/generic/DataTypeGenericInputComponent";
import {
Expand Down Expand Up @@ -62,6 +63,12 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
schema={schema}
suggestions={suggestions}
{...rest}/>
case "file":
case "list-file":
return <DataTypeFileInputComponent
schema={schema}
suggestions={suggestions}
{...rest}/>
case "list":
case "data":
return <DataTypeJSONInputComponent
Expand Down
6 changes: 4 additions & 2 deletions src/packages/ce/src/datatype/components/inputs/DataTypeInputControlsComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
ReferenceValue,
SubFlowValue
} from "@code0-tech/sagittarius-graphql-types";
import React from "react";
import React, {ReactElement} from "react";
import {IconChevronRight, IconVariable, IconX} from "@tabler/icons-react";
import {ReferenceBadgeComponent} from "@edition/datatype/components/badges/ReferenceBadgeComponent";
import {
Expand Down Expand Up @@ -260,7 +260,9 @@ export const DataTypeInputControlsComponent: React.FC<DataTypeInputControlsCompo
</MenuPortal>
</Menu>
) : <></>}
{children ?? <></>}
{
(children ?? null as unknown as ReactElement<any>)
}
<Button paddingSize={"xxs"} tabIndex={-1} onClick={(event) => {
onSelect?.(null)
event.stopPropagation()
Expand Down
174 changes: 174 additions & 0 deletions src/packages/ce/src/datatype/components/inputs/file/DataTypeFileInputComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
import React from "react";
import {DataTypeInputComponentProps} from "../DataTypeInputComponent";
import {
Button,
FileInput,
FileInputContext,
FileInputDropzone,
FileInputHiddenInput,
FileInputItem,
FileInputItemDeleteTrigger,
FileInputItemGroup,
FileInputItemName,
FileInputTrigger,
Flex,
InputDescription,
InputLabel,
Text
} from "@code0-tech/pictor";
import {InputWrapper} from "@code0-tech/pictor/dist/components/form/InputWrapper";
import {IconPaperclip, IconX} from "@tabler/icons-react";
import {FileUploadFileChangeDetails} from "@ark-ui/react";
import {useDebouncedCallback} from "use-debounce";
import {NodeSchema, Schema} from "@code0-tech/triangulum";
import {
LiteralValue,
NodeFunction,
NodeParameterValue,
ReferenceValue,
SubFlowValue
} from "@code0-tech/sagittarius-graphql-types";
import {DataTypeInputControlsComponent} from "@edition/datatype/components/inputs/DataTypeInputControlsComponent";
import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/DataTypeInputValueComponent";

export type DataTypeFileInputComponentProps = DataTypeInputComponentProps

export const DataTypeFileInputComponent: React.FC<DataTypeFileInputComponentProps> = (props) => {

const {schema, formValidation, title, initialValue, description, suggestions, onChange} = props

const dataSchema = "schema" in (schema ?? {}) ? (schema as NodeSchema)?.schema : (schema as Schema)
const multiple = dataSchema?.input === "list-file"
const mimetype = (dataSchema as { mimetype?: string })?.mimetype

const maxUploadSize = 5 * 1024 * 1024
const base64ByName = React.useRef<Map<string, string>>(new Map())
const defaultValue: NodeParameterValue | NodeFunction | undefined = React.useMemo(() => initialValue ?? undefined, [initialValue])
const defaultAcceptedFiles: File[] = React.useMemo(() => {
const literal = initialValue?.__typename === "LiteralValue" ? initialValue.value : undefined
if (literal == null) return []
const entries = Array.isArray(literal) ? literal : [literal]
return entries.flatMap((entry, index) => {
const contentType = (entry as { contentType?: string })?.contentType ?? ""
const base64 = (entry as { value?: string })?.value
if (typeof base64 !== "string") return []
const extension = contentType.includes("/") ? contentType.split("/")[1] : ""
const name = (entry as { fileName?: string })?.fileName || (extension ? `file-${index}.${extension}` : `file-${index}`)
base64ByName.current.set(name, base64)
return [new File([], name, {type: contentType})]
})
}, [initialValue])
const fileKey = defaultAcceptedFiles.map(file => `${file.type}:${file.name}`).join("|") || "empty"
const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | null) => {
onChange?.(value)
}, 400)

return React.useMemo(() => <>
<InputLabel>{title}</InputLabel>
<InputDescription>{description}</InputDescription>
<DataTypeInputValueComponent initialValue={initialValue} onChange={value => {
formValidation?.setValue?.(value)
onChangeDebounced(value)
}} suggestions={suggestions} formValidation={formValidation}>
{/*@ts-ignore*/}
<FileInput key={fileKey}
accept={mimetype && mimetype !== "*/*" ? mimetype : undefined}
maxFiles={multiple ? Number.POSITIVE_INFINITY : 1}
maxFileSize={maxUploadSize}
defaultAcceptedFiles={defaultAcceptedFiles}
maw={"100%"}
formValidation={{
...formValidation,
notValidMessage: undefined,
setValue: (details: FileUploadFileChangeDetails | undefined) => {
void (async () => {
const files = await Promise.all((details?.acceptedFiles ?? []).map(async file => {
const value = base64ByName.current.get(file.name) ?? await new Promise<string>((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => {
const result = reader.result as string
resolve(result.slice(result.indexOf(",") + 1))
}
reader.onerror = reject
reader.readAsDataURL(file)
})
base64ByName.current.set(file.name, value)
return {
contentType: file.type || (mimetype && mimetype !== "*/*" ? mimetype : ""),
valueType: "base64" as const,
fileName: file.name,
value
}
}))
const literal: LiteralValue | null = files.length <= 0 ? null : {
__typename: "LiteralValue",
value: multiple ? files : files[0]
}
formValidation?.setValue?.(literal)
onChangeDebounced(literal)
})()
}
}}>
<FileInputDropzone asChild>
<div style={{width: "100%", cursor: "pointer"}}>
<InputWrapper maw={"100%"}
formValidation={{...formValidation, setValue: undefined}}
rightType={"action"}
right={
<div onClick={event => event.stopPropagation()}>
<DataTypeInputControlsComponent suggestions={suggestions} onSelect={value => {
formValidation?.setValue?.(value)
onChangeDebounced(value)
}}>
<FileInputTrigger asChild>
<Button paddingSize={"xxs"}>
<IconPaperclip size={13}/>
</Button>
</FileInputTrigger>
</DataTypeInputControlsComponent>
</div>
}>
<div style={{alignSelf: "center", flex: "1 1 auto"}}>
<FileInputContext>
{({acceptedFiles}) => acceptedFiles.length <= 0 ? (
<Text hierarchy={"tertiary"} fz={0.8}>
{title}
</Text>
) : !multiple ? (
<Text fz={0.8}>
{acceptedFiles[0]?.name}
</Text>
) : (
<FileInputItemGroup display={"flex"}
onClick={event => event.stopPropagation()}
py={0.7}
style={{gap: "0.35rem", flexWrap: "wrap", alignItems: "center"}}>
{acceptedFiles.map(file => (
<FileInputItem file={file} key={file.name} asChild>
<Flex align={"center"} justify={"center"} style={{gap: "0.25rem"}}>
<Text fz={0.8}>
<FileInputItemName/>
</Text>
{acceptedFiles.length > 1 && (
<FileInputItemDeleteTrigger asChild>
<Button variant={"outlined"} p={"0"}
onClick={event => event.stopPropagation()}>
<IconX size={13}/>
</Button>
</FileInputItemDeleteTrigger>
)}
</Flex>
</FileInputItem>
))}
</FileInputItemGroup>
)}
</FileInputContext>
</div>
</InputWrapper>
</div>
</FileInputDropzone>
<FileInputHiddenInput/>
</FileInput>
</DataTypeInputValueComponent>
</>, [formValidation, defaultValue])
}