From baa83ecec85e2004e11644db6c1c15d05e6b996f Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 20 Apr 2024 09:32:48 +0800
Subject: [PATCH] feat: improve file upload

---
 .../registry/new-york/example/AutoForm.vue    |  9 ++++++++
 .../new-york/ui/auto-form/fields/File.vue     | 22 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/apps/www/src/lib/registry/new-york/example/AutoForm.vue b/apps/www/src/lib/registry/new-york/example/AutoForm.vue
index 62d3f192..5ca6ef8b 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoForm.vue
@@ -145,6 +145,15 @@ function onSubmit(values: Record<string, any>) {
       </div>
     </template>
 
+    <template #customParent="slotProps">
+      <div class="flex items-end space-x-2">
+        <AutoFormField v-bind="slotProps" class="w-full" />
+        <Button type="button">
+          Check
+        </Button>
+      </div>
+    </template>
+
     <Button type="submit">
       Submit
     </Button>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
index 56dd6030..432ebba3 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import { TrashIcon } from '@radix-icons/vue'
 import { beautifyObjectName } from '../utils'
 import type { FieldProps } from '../interface'
 import AutoFormLabel from '../AutoFormLabel.vue'
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
 import { Input } from '@/lib/registry/new-york/ui/input'
+import { Button } from '@/lib/registry/new-york/ui/button'
 
 defineProps<FieldProps>()
 
+const inputFile = ref<File>()
 async function parseFileAsString(file: File | undefined): Promise<string> {
   return new Promise((resolve, reject) => {
     if (file) {
@@ -32,15 +36,33 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
       <FormControl>
         <slot v-bind="slotProps">
           <Input
+            v-if="!inputFile"
             type="file"
             v-bind="{ ...config?.inputProps }"
             :disabled="disabled"
             @change="async (ev: InputEvent) => {
               const file = (ev.target as HTMLInputElement).files?.[0]
+              inputFile = file
               const parsed = await parseFileAsString(file)
               slotProps.componentField.onInput(parsed)
             }"
           />
+          <div v-else class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors">
+            <p>{{ inputFile?.name }}</p>
+            <Button
+              :size="'icon'"
+              :variant="'ghost'"
+              class="h-[26px] w-[26px]"
+              aria-label="Remove file"
+              type="button"
+              @click="() => {
+                inputFile = undefined
+                slotProps.componentField.onInput(undefined)
+              }"
+            >
+              <TrashIcon />
+            </Button>
+          </div>
         </slot>
       </FormControl>
       <FormDescription v-if="config?.description">