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; data.node.template[name].value = t;
}} }}
/> />
) : left === true && type === "file" ? ( ) : (left === true && type === "file")||data.type==="JsonSpec" ? (
<InputFileComponent <InputFileComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name]?.value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; 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 showError = useRef(true);
const { types, deleteNode } = useContext(typesContext); const { types, deleteNode } = useContext(typesContext);
const Icon = nodeIcons[types[data.type]]; const Icon = nodeIcons[types[data.type]];
console.log(data)
if (!Icon) { if (!Icon) {
if (showError.current) { if (showError.current) {
setErrorData({ 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"> <div className="w-full flex items-center gap-3">
<span <span
className={ 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" : "") (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 { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { alertContext } from "../../contexts/alertContext";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
export default function InputFileComponent({ export default function InputFileComponent({
@ -8,6 +9,7 @@ export default function InputFileComponent({
disabled, disabled,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { setErrorData } = useContext(alertContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
@ -18,15 +20,20 @@ export default function InputFileComponent({
const handleButtonClick = () => { const handleButtonClick = () => {
const input = document.createElement("input"); const input = document.createElement("input");
input.type = "file"; input.type = "file";
// input.accept = ".yaml"; input.accept = ".json";
input.style.display = "none"; input.style.display = "none";
input.multiple = false;
input.onchange = (e: Event) => { input.onchange = (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
//check file type if (file && file.name.endsWith(".json")) {
// file.name.endsWith(".yaml")
if (file) {
setMyValue(file.name); setMyValue(file.name);
onChange(file.name); onChange(file.name);
} else {
setErrorData({
title:
"Please select a valid file. Only files this files are allowed:",
list: ["*.json"],
});
} }
}; };
input.click(); input.click();
@ -41,16 +48,14 @@ export default function InputFileComponent({
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">
<span <span
className={ 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" : "") (disabled ? " bg-gray-200" : "")
} }
> >
{myValue !== "" ? myValue : "No file"} {myValue !== "" ? myValue : "No file"}
</span> </span>
<button <button onClick={handleButtonClick}>
onClick={handleButtonClick} <DocumentMagnifyingGlassIcon className="w-8 h-8 hover:text-blue-600" />
>
<DocumentMagnifyingGlassIcon className="w-6 h-6 hover:text-blue-600" />
</button> </button>
</div> </div>
</div> </div>