diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-10 15:43:15 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-10 15:43:15 -0300 |
commit | ea13e19ece2deeb4ab9731373f68b1dcf5b6fa88 (patch) | |
tree | c568777c803cf710693544640b18ce9714d4cb63 /packages/anastasis-webui/src/components/fields | |
parent | f9dedc06d6825640c9f1aca462779757cb4194e4 (diff) | |
download | wallet-core-ea13e19ece2deeb4ab9731373f68b1dcf5b6fa88.tar.xz |
file upload
Diffstat (limited to 'packages/anastasis-webui/src/components/fields')
-rw-r--r-- | packages/anastasis-webui/src/components/fields/FileInput.tsx | 47 | ||||
-rw-r--r-- | packages/anastasis-webui/src/components/fields/TextInput.tsx | 2 |
2 files changed, 34 insertions, 15 deletions
diff --git a/packages/anastasis-webui/src/components/fields/FileInput.tsx b/packages/anastasis-webui/src/components/fields/FileInput.tsx index 52d6eab4a..adf51afb0 100644 --- a/packages/anastasis-webui/src/components/fields/FileInput.tsx +++ b/packages/anastasis-webui/src/components/fields/FileInput.tsx @@ -20,11 +20,26 @@ */ import { h, VNode } from "preact"; import { useLayoutEffect, useRef, useState } from "preact/hooks"; -import { TextInputProps } from "./TextInput"; const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; -export function FileInput(props: TextInputProps): VNode { +export interface FileTypeContent { + content: string; + type: string; + name: string; +} + +export interface FileInputProps { + label: string; + grabFocus?: boolean; + disabled?: boolean; + error?: string; + placeholder?: string; + tooltip?: string; + onChange: (v: FileTypeContent | undefined) => void; +} + +export function FileInput(props: FileInputProps): VNode { const inputRef = useRef<HTMLInputElement>(null); useLayoutEffect(() => { if (props.grabFocus) { @@ -32,18 +47,19 @@ export function FileInput(props: TextInputProps): VNode { } }, [props.grabFocus]); - const value = props.bind[0]; - // const [dirty, setDirty] = useState(false) - const image = useRef<HTMLInputElement>(null); + const fileInputRef = useRef<HTMLInputElement>(null); const [sizeError, setSizeError] = useState(false); - function onChange(v: string): void { - // setDirty(true); - props.bind[1](v); - } return ( <div class="field"> <label class="label"> - <a onClick={() => image.current?.click()}>{props.label}</a> + <a class="button" onClick={(e) => fileInputRef.current?.click()}> + <div class="icon is-small "> + <i class="mdi mdi-folder" /> + </div> + <span> + {props.label} + </span> + </a> {props.tooltip && ( <span class="icon has-tooltip-right" data-tooltip={props.tooltip}> <i class="mdi mdi-information" /> @@ -52,18 +68,19 @@ export function FileInput(props: TextInputProps): VNode { </label> <div class="control"> <input - ref={image} + ref={fileInputRef} style={{ display: "none" }} type="file" - name={String(name)} + // name={String(name)} onChange={(e) => { const f: FileList | null = e.currentTarget.files; if (!f || f.length != 1) { - return onChange(""); + return props.onChange(undefined); } + console.log(f) if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { setSizeError(true); - return onChange(""); + return props.onChange(undefined); } setSizeError(false); return f[0].arrayBuffer().then((b) => { @@ -73,7 +90,7 @@ export function FileInput(props: TextInputProps): VNode { "", ), ); - return onChange(`data:${f[0].type};base64,${b64}` as any); + return props.onChange({content: `data:${f[0].type};base64,${b64}`, name: f[0].name, type: f[0].type}); }); }} /> diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx index fd0c658ed..4f417730c 100644 --- a/packages/anastasis-webui/src/components/fields/TextInput.tsx +++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx @@ -4,6 +4,7 @@ import { useLayoutEffect, useRef, useState } from "preact/hooks"; export interface TextInputProps { label: string; grabFocus?: boolean; + disabled?: boolean; error?: string; placeholder?: string; tooltip?: string; @@ -33,6 +34,7 @@ export function TextInput(props: TextInputProps): VNode { <div class="control has-icons-right"> <input value={value} + disabled={props.disabled} placeholder={props.placeholder} class={showError ? "input is-danger" : "input"} onInput={(e) => { |