Merge pull request #290 from dnum-mi/fix/error-in-dsfr-file-upload

fix: 🐛 DsfrFileUpload émet update:modelValue et change

Author: laruiss

src/components/DsfrFileUpload/DsfrFileUpload.vue

@@ -22,6 +22,19 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    modelValue: {
+      type: String,
+      default: undefined,
+    },
+  },
+
+  emits: ['update:modelValue', 'change'],
+
+  methods: {
+    onChange ($event) {
+      this.$emit('update:modelValue', $event.target.value)
+      this.$emit('change', $event.target.files)
+    },
   },
 })
 </script>
@@ -48,6 +61,8 @@ export default defineComponent({
       type="file"
       :aria-describedby="`${id}-desc`"
       v-bind="$attrs"
+      :value="modelValue"
+      @change="onChange($event)"
     >
     <p
       v-if="error"

src/demo-app/App.vue

@@ -7,6 +7,7 @@ import DsfrHeader from '../components/DsfrHeader/DsfrHeader.vue'
 import DsfrNavigation from '../components/DsfrNavigation/DsfrNavigation.vue'
 import DsfrSkipLinks from '../components/DsfrSkipLinks/DsfrSkipLinks.vue'
 import DsfrModal from '../components/DsfrModal/DsfrModal.vue'
+import DsfrFileUpload from '../components/DsfrFileUpload/DsfrFileUpload.vue'
 
 const isModalOpen = ref(false)
 const displayAlert = ref(false)
@@ -19,6 +20,16 @@ const close = () => {
 }
 
 const inputValue = ref('')
+const filesToUpload = ref(undefined)
+
+const updateFiles = (files) => {
+  console.log(files)
+}
+
+const sendFile = () => {
+  console.log('inputValue:', inputValue.value)
+  console.log('filesToUpload:', filesToUpload.value)
+}
 
 // eslint-disable-next-line no-unused-vars
 const actions = [
@@ -148,11 +159,23 @@ const navItems = [
           </DsfrAccordion>
         </li>
       </DsfrAccordionsGroup>
-      <DsfrInput
-        v-model="inputValue"
-        label="Test"
-        label-visible
-      />
+      <form @submit.prevent="sendFile()">
+        <DsfrInput
+          v-model="inputValue"
+          label="Test"
+          label-visible
+        />
+        <DsfrFileUpload
+          v-model="filesToUpload"
+          label="Test"
+          label-visible
+          @change="updateFiles($event)"
+        />
+        <input
+          type="submit"
+          value="OK"
+        >
+      </form>
     </div>
 
     <DsfrModal