bravio init project

components/InputAttach.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <label for="file-upload" class="block text-sm text-gray-900">
+      <p class="mb-2">{{ label }}</p>
+      <div class="flex justify-between items-center p-2 cursor-pointer rounded-md bg-white outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 hover:text-indigo-500">
+        <span v-if="file && file.name" class="text-sm text-gray-500">{{ file.name }}</span>
+        <img src="@/assets/svg/file-up.svg" alt="" class="h-5 w-5 ml-auto" />
+      </div>
+      <input id="file-upload" type="file" name="file-upload"  accept="image/png, image/jpeg" class="hidden" @change="onFileChange"/>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: { type: String, default: 'Sube tu archivo' },
+    required: { type: Boolean, default: false },
+  },
+  emits: ['input-value'],
+  data() {
+    return {
+      file: null
+    }
+  },
+  methods: {
+    onFileChange(event) {
+      const selectedFile = event.target.files[0]
+      if (selectedFile) {
+        this.file = selectedFile
+        this.$emit('input-value', this.file);
+      }
+    },
+  },
+}
+</script>