diff options
author | Sebastian <sebasjm@gmail.com> | 2023-11-20 12:38:16 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-11-20 12:38:16 -0300 |
commit | 6138846050563e0dca95b0b6d792776925e4c35f (patch) | |
tree | b33cd36acf4b38d3a016506d4f7fa681c83beb63 /packages/aml-backoffice-ui/src/handlers/InputFile.tsx | |
parent | 7ed3e78f790837479fc2bb2eb6ddc40c78ce59b5 (diff) | |
download | wallet-core-6138846050563e0dca95b0b6d792776925e4c35f.tar.xz |
new forms api
Diffstat (limited to 'packages/aml-backoffice-ui/src/handlers/InputFile.tsx')
-rw-r--r-- | packages/aml-backoffice-ui/src/handlers/InputFile.tsx | 88 |
1 files changed, 46 insertions, 42 deletions
diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx index 0d89a98a3..d9af03f86 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx @@ -42,40 +42,42 @@ export function InputFile<T extends object, K extends keyof T>( clip-rule="evenodd" /> </svg> - <div class="my-2 flex text-sm leading-6 text-gray-600"> - <label - for="file-upload" - class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500" - > - <span>Upload a file</span> - <input - id="file-upload" - name="file-upload" - type="file" - class="sr-only" - accept={accept} - onChange={(e) => { - const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) { - return onChange(undefined!); - } - if (f[0].size > maxBites) { - return onChange(undefined!); - } - return f[0].arrayBuffer().then((b) => { - const b64 = window.btoa( - new Uint8Array(b).reduce( - (data, byte) => data + String.fromCharCode(byte), - "", - ), - ); - return onChange(`data:${f[0].type};base64,${b64}` as any); - }); - }} - /> - </label> - {/* <p class="pl-1">or drag and drop</p> */} - </div> + {!state.disabled && + <div class="my-2 flex text-sm leading-6 text-gray-600"> + <label + for="file-upload" + class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500" + > + <span>Upload a file</span> + <input + id="file-upload" + name="file-upload" + type="file" + class="sr-only" + accept={accept} + onChange={(e) => { + const f: FileList | null = e.currentTarget.files; + if (!f || f.length != 1) { + return onChange(undefined!); + } + if (f[0].size > maxBites) { + return onChange(undefined!); + } + return f[0].arrayBuffer().then((b) => { + const b64 = window.btoa( + new Uint8Array(b).reduce( + (data, byte) => data + String.fromCharCode(byte), + "", + ), + ); + return onChange(`data:${f[0].type};base64,${b64}` as any); + }); + }} + /> + </label> + {/* <p class="pl-1">or drag and drop</p> */} + </div> + } </div> </div> ) : ( @@ -85,14 +87,16 @@ export function InputFile<T extends object, K extends keyof T>( class=" h-24 w-full object-cover relative" /> - <div - class="opacity-0 hover:opacity-70 duration-300 absolute rounded-lg border inset-0 z-10 flex justify-center text-xl items-center bg-black text-white cursor-pointer " - onClick={() => { - onChange(undefined!); - }} - > - Clear - </div> + {!state.disabled && + <div + class="opacity-0 hover:opacity-70 duration-300 absolute rounded-lg border inset-0 z-10 flex justify-center text-xl items-center bg-black text-white cursor-pointer " + onClick={() => { + onChange(undefined!); + }} + > + Clear + </div> + } </div> )} {help && <p class="text-xs leading-5 text-gray-600 mt-2">{help}</p>} |