feat(v-file-upload): accept string url as value

gitsindonesia · Jul 18, 2022 · cd800db · cd800db
1 parent 759b457
commit cd800db
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 50 deletions.
diff --git a/packages/forms/src/file-input/VFileUpload.stories.ts b/packages/forms/src/file-input/VFileUpload.stories.ts
@@ -123,7 +123,6 @@ export const Validation: Story<VInputProps> = (args) => ({
         name="avatar"
         label="Avatar"
         placeholder="Pick your best photo"
-        label="Image"
         rounded
         image
       />
@@ -133,7 +132,6 @@ export const Validation: Story<VInputProps> = (args) => ({
         name="banner"
         label="Banner"
         placeholder="Choose banner image"
-        label="Banner"
         image
         preview
       />
@@ -143,7 +141,6 @@ export const Validation: Story<VInputProps> = (args) => ({
         label="Document"
         placeholder="Pick PDF File"
         accept="application/pdf"
-        label="Document"
       />
       <div class="mt-4">
         <v-btn type="submit">Submit</v-btn>
@@ -186,7 +183,6 @@ export const InitialError: Story<VInputProps> = (args) => ({
         name="avatar"
         label="Avatar"
         placeholder="Pick your best photo"
-        label="Image"
         rounded
         image
       />
@@ -196,7 +192,6 @@ export const InitialError: Story<VInputProps> = (args) => ({
         name="banner"
         label="Banner"
         placeholder="Choose banner image"
-        label="Banner"
         image
         preview
       />
@@ -206,7 +201,67 @@ export const InitialError: Story<VInputProps> = (args) => ({
         label="Document"
         placeholder="Pick PDF File"
         accept="application/pdf"
+      />
+      <div class="mt-4">
+        <v-btn type="submit">Submit</v-btn>
+        <v-btn type="button" text @click="resetForm">Reset</v-btn>
+      </div>
+      <pre>{{ {values} }}</pre>
+    </form>
+`,
+});
+
+export const InitialValues: Story<VInputProps> = (args) => ({
+  components: {VInput, VBtn, VFileUpload},
+  setup() {
+    const schema = object({
+      avatar: mixed().required().label('Avatar'),
+      banner: mixed().required().label('Banner'),
+      document: mixed().required().label('Document'),
+    });
+
+    const {handleSubmit, resetForm, values} = useForm({
+      validationSchema: schema,
+      initialValues: {
+        avatar: 'https://picsum.photos/200/300',
+        banner: 'https://picsum.photos/200/300',
+        document: 'https://picsum.photos/200/300',
+      },
+    });
+
+    const onSubmit = handleSubmit((values) => {
+      alert(JSON.stringify(values));
+    });
+
+    return {onSubmit, resetForm, values};
+  },
+  template: `
+    <form @submit="onSubmit" class="border-none">
+      <v-file-upload
+        wrapper-class="mb-4"
+        theme="image"
+        name="avatar"
+        label="Avatar"
+        placeholder="Pick your best photo"
+        rounded
+        image
+        preview
+      />
+      <v-file-upload
+        wrapper-class="mb-4"
+        theme="dropzone"
+        name="banner"
+        label="Banner"
+        placeholder="Choose banner image"
+        image
+        preview
+      />
+      <v-file-upload
+        wrapper-class="mb-4"
+        name="document"
         label="Document"
+        placeholder="Pick PDF File"
+        accept="application/pdf"
       />
       <div class="mt-4">
         <v-btn type="submit">Submit</v-btn>

diff --git a/packages/forms/src/file-input/VFileUpload.vue b/packages/forms/src/file-input/VFileUpload.vue
@@ -178,14 +178,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'input',
-  'removed',
-  'update:modelValue',
-  'update:value',
-  'change',
-  'blur',
-]);
+const emit = defineEmits(['removed', 'update:modelValue', 'change', 'blur']);
 
 const {
   image,
@@ -203,18 +196,40 @@ const {
 } = toRefs(props);
 
 const {value: innerValue, errorMessage} = useField(name, rules, {
-  initialValue: props.modelValue || props.value,
+  initialValue: modelValue.value || value.value,
 });
 
-const isDropzone = computed(() => props.theme === 'dropzone');
-const sizeClass = computed(() => (props.full ? 'w-full' : customSize.value));
-
 const fileRef = ref<HTMLInputElement | null>(null);
 const previewURL = ref<string | null>(null);
 const hasInitialValue = ref(false);
 
+const isDropzone = computed(() => props.theme === 'dropzone');
+const sizeClass = computed(() => (props.full ? 'w-full' : customSize.value));
+
 const acceptedTypes = computed(() => (image.value ? 'image/*' : accept.value));
 
+const setInitialValue = (val: any) => {
+  const isFile = val instanceof File;
+  const isFileList = val instanceof FileList;
+
+  if (typeof val === 'string') {
+    hasInitialValue.value = true;
+    innerValue.value = val;
+    previewURL.value = val;
+  } else if (isFile || isFileList) {
+    innerValue.value = val;
+  } else if (image.value && val && !previewURL.value) {
+    hasInitialValue.value = true;
+    previewURL.value = URL.createObjectURL(innerValue.value as any);
+  } else if (!val) {
+    innerValue.value = null;
+    previewURL.value = null;
+    hasInitialValue.value = false;
+  }
+};
+
+setInitialValue(innerValue.value);
+
 const inputAttrs = computed(() => ({
   ...inputProps.value,
   multiple: multiple.value,
@@ -230,7 +245,6 @@ const handleFiles = (files: FileList) => {
 
     emit('change', files);
     emit('update:modelValue', files);
-    emit('update:value', files);
   } else {
     const firstFile = files[0];
 
@@ -242,7 +256,6 @@ const handleFiles = (files: FileList) => {
 
     emit('change', firstFile);
     emit('update:modelValue', firstFile);
-    emit('update:value', firstFile);
   }
 };
 
@@ -262,36 +275,12 @@ const removeFile = () => {
 
   emit('change', null);
   emit('update:modelValue', null);
-  emit('update:value', null);
   emit('removed');
 };
 
-const setInitialValue = (val: any) => {
-  console.log({val, props});
-
-  const isFile = val instanceof File;
-  const isFileList = val instanceof FileList;
-
-  if (typeof val === 'string') {
-    hasInitialValue.value = true;
-    previewURL.value = val;
-  }
-
-  if (isFile || isFileList) {
-    innerValue.value = val;
-  }
-
-  if (image.value && val && !previewURL.value) {
-    hasInitialValue.value = true;
-    previewURL.value = URL.createObjectURL(innerValue.value as any);
-  }
-
-  if (!val) {
-    innerValue.value = null;
-    previewURL.value = null;
-    hasInitialValue.value = false;
-  }
-};
+watch(modelValue, (val) => {
+  setInitialValue(val);
+});
 
 const hasFile = computed(() => {
   return !!innerValue.value || !!hasInitialValue.value;
@@ -307,10 +296,6 @@ const fileURL = computed(
     (innerValue.value || value.value || modelValue.value || {file: ''}).file,
 );
 
-watch(modelValue, (val) => {
-  setInitialValue(val);
-});
-22;
 const disabledClass = computed(() => {
   return disabled.value || readonly.value ? 'disabled-input' : '';
 });