<template>
	<div class="form-group" :class="{'has-error': form.errors.has(input_name)}">
        <label v-if="label" for="name">{{ label }}</label>
		<div class="upload-box">
	        <div class="file-container mb-1">
	        	<i class="fa fa-download"></i>
	            <input type='file'
	        		:name="input_name" 
		            @change="onChange"
		        />
		        <div>{{ file_name }}</div>
	        </div>
	    </div>
        <div class="text-danger text-left" v-if="form.errors.has(input_name)" v-text="form.errors.get(input_name)"></div>
	</div>
</template>

<script>

	export default {
		props: ['input_name', 'form', 'placeholder', 'label'],
		components: {

		},
		data() {
			return {
				file_name: '',
				file: []
			}
		},
		methods: {
			onChange(e) {
				let vm = this;
				let files = e.target.files;
				General.imageBase64(e.target.files).then(data => {
					vm.file = data[0];
					vm.file_name = e.target.files[0].name;
      				vm.form[vm.input_name] = [vm.file];
				});
			},
		}
	}
</script>