36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<label for="file-upload" class="block text-sm ">
|
|
<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> |