<template>
    <div class="file has-name">
        <label class="file-label">
            <input
                class="file-input"
                type="file"
                name="canasta"
                @change="archivoSubido"
            />
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fas fa-cloud-upload-alt"></i>
                </span>
                <span class="file-label">{{ text }}</span>
            </span>
            <span class="file-name" v-if="cargando">
                {{ 'Cargando ' + archivo.nombre }}
            </span>
        </label>
    </div>
</template>

<script>
export default {
    name: "InputFileButton",
    props: {
        text: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            archivo: null,
            cargando: false,
        };
    },
    methods: {
        archivoSubido(event) {
            const archivo = event.target.files[0];
            if (archivo) {
                this.archivo = { data: archivo, nombre: archivo.name };
                this.$emit("archivo-subido", {
                    component: this,
                    archivo: archivo
                });
                this.cargando = true;
            }
        },
    },
};
</script>

<style scoped>

</style>