\n \n \n Prompt\n \n {\n onChange(e)\n }}\n onKeyDown={onKeyDown}\n autoFocus={true}\n />\n \n

\n \n

\n {running && (\n \n \n \n )}\n {!running && (\n \n \n \n )}\n

\n \n

\n );\n}\n\nexport function ImageDropContainer ({\n images,\n setImages,\n running,\n children,\n}: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n running: boolean;\n children: React.ReactNode;\n}) {\n const dragging = useImageDrop({ images, setImages, running });\n\n return (\n <>\n {children}\n {dragging && (\n

\n Drop images here to upload\n

\n )}\n \n );\n}\n\nexport function useImageDrop ({ images, setImages, running }: {\n images: (string|null)[];\n setImages(images: (string|null)[]) => void;\n running: boolean;\n}) {\n const [dragging, setDragging] = useState(false);\n\n const onDragEnter = (e: React.DragEvent) => {\n e.preventDefault();\n if (!e.dataTransfer?.types.includes('Files')) return;\n setDragging(true);\n }\n\n const onDragLeave = (e:React.DragEvent) => {\n e.preventDefault();\n if (!e.relatedTarget) {\n setDragging(false);\n }\n }\n\n const onDragOver = (e:React.DragEvent) => {\n e.preventDefault();\n }\n\n const onDrop = (e:React.DragEvent) => {\n e.preventDefault();\n setDragging(false);\n if (e.dataTransfer?.files && !running) {\n processFiles(Array.from(e.dataTransfer.files), images, setImages);\n }\n }\n\n useEffect(() => {\n document.addEventListener(\"dragenter\", onDragEnter);\n document.addEventListener(\"dragleave\", onDragLeave);\n document.addEventListener(\"dragover\", onDragOver);\n document.addEventListener(\"drop\", onDrop);\n\n return () => {\n document.removeEventListener(\"dragenter\", onDragEnter);\n document.removeEventListener(\"dragleave\", onDragLeave);\n document.removeEventListener(\"dragover\", onDragOver);\n document.removeEventListener(\"drop\", onDrop);\n }\n }, []);\n\n return dragging;\n}\n\nfunction ImageRow ({ images, setImages }: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n}) {\n return (\n

\n {images.map((image, i) => (\n {\n setImages([\n ...images.slice(0, i),\n ...images.slice(i + 1),\n ]);\n }}\n />\n ))}\n

\n );\n}\n\nfunction Thumbnail ({ image, onRemove }: {\n image: string|null;\n onRemove: () => void;\n}) {\n if (!image) return null;\n\n return (\n

\n \n \n \n \n

\n );\n}\n\nfunction UploadButton ({\n images,\n setImages,\n disabled,\n}: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n disabled: boolean;\n}) {\n const ref = useRef(null);\n\n return (\n

\n {\n ref.current?.click();\n }}\n className=\"icon-button\">\n \n

\n Upload image\n

\n \n {\n if (e.target.files) {\n processFiles(Array.from(e.target.files), images, setImages);\n }\n }}\n />\n

\n );\n}\n","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/philz/Townie/code/frontend/components/InputBox.tsx","extension","actionData","errors"]