<template>
<div class="upload-btn-wrapper">
    <i class="fa fa-file" style="color:#fb4d0a"></i> Upload File
    <input type="file" :name="name" :id="id" @change="uploadFile" />
</div>
</template>
<script lang="ts">
import InputForm from '@/lib-components/component/InputForm.vue';
import { DirectoryFilesService } from '@/domain/services/DirectoryFiles.service'
// import { Response } from '@/domain/models/Response.interface';
export default {
    name: 'UploadFile',
    emits: ['startUpload', 'update:endUpload' ],
    components:{
        InputForm
    },
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        label: { type: String, default: '' },
        invalid: { type: Boolean, default: false },
        path: { type: String, default: '' },
    },
    data: ()=>{
        return {
            isEditing: false,
            fileName: '',
            directoryFileService: new DirectoryFilesService(),
        }
    },
    methods: {
        async uploadFile(event: any ){
            this.$emit("startUpload");
             
            let promise = this.directoryFileService.uploadFileToServer(event.target.files[0], this.path);
            this.$emit("update:endUpload", promise);
            // promise.then((response: Response) => {
            //     self.$emit("update:endUpload");
            //     console.log('emit endUpload', response);
            // });
        },
    },
}
</script>
<style scoped>
.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.upload-btn {
    background: #fb4d0a;
    color: #fff;
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

</style>