jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

ui ready, need to implement dinamic file type check

Browse source
This commit is contained in:
anovazzi1 2023-03-29 21:09:24 -03:00
commit a38d71bc4f
4 changed files with 18 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -154,10 +154,10 @@ export default function ParameterComponent({
data.node.template[name].value = t;
}}
/>
) : left === true && type === "file" ? (
) : (left === true && type === "file")||data.type==="JsonSpec" ? (
<InputFileComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
value={data.node.template[name]?.value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}

1
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -22,6 +22,7 @@ export default function GenericNode({
const showError = useRef(true);
const { types, deleteNode } = useContext(typesContext);
const Icon = nodeIcons[types[data.type]];
console.log(data)
if (!Icon) {
if (showError.current) {
setErrorData({

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -23,7 +23,7 @@ export default function CodeAreaComponent({
<div className="w-full flex items-center gap-3">
<span
className={
"truncate block max-w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}
>

23
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -1,5 +1,6 @@
import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react";
import { alertContext } from "../../contexts/alertContext";
import { TextAreaComponentType } from "../../types/components";
export default function InputFileComponent({
@ -8,6 +9,7 @@ export default function InputFileComponent({
disabled,
}: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value);
const { setErrorData } = useContext(alertContext);
useEffect(() => {
if (disabled) {
setMyValue("");
@ -18,15 +20,20 @@ export default function InputFileComponent({
const handleButtonClick = () => {
const input = document.createElement("input");
input.type = "file";
// input.accept = ".yaml";
input.accept = ".json";
input.style.display = "none";
input.multiple = false;
input.onchange = (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0];
//check file type
// file.name.endsWith(".yaml")
if (file) {
if (file && file.name.endsWith(".json")) {
setMyValue(file.name);
onChange(file.name);
} else {
setErrorData({
title:
"Please select a valid file. Only files this files are allowed:",
list: ["*.json"],
});
}
};
input.click();
@ -41,16 +48,14 @@ export default function InputFileComponent({
<div className="w-full flex items-center gap-3">
<span
className={
"truncate block max-w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}
>
{myValue !== "" ? myValue : "No file"}
</span>
<button
onClick={handleButtonClick}
>
<DocumentMagnifyingGlassIcon className="w-6 h-6 hover:text-blue-600" />
<button onClick={handleButtonClick}>
<DocumentMagnifyingGlassIcon className="w-8 h-8 hover:text-blue-600" />
</button>
</div>
</div>