Lemuel Marquez
81 lines
1.6 KiB
Vue
81 lines
1.6 KiB
Vue
<template>
|
|
<div class="container">
|
|
<h3 class="title is-4 mt-6">
|
|
Carta de termino (en formato .PDF. No se aceptan fotos).
|
|
</h3>
|
|
|
|
<b-field>
|
|
<b-upload
|
|
v-model="file"
|
|
drag-drop
|
|
type="is-black"
|
|
expanded
|
|
accept="application/pdf"
|
|
>
|
|
<section class="section">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<b-icon icon="upload" size="is-large"></b-icon>
|
|
</p>
|
|
<p>
|
|
{{
|
|
file.name || "Arrastra aquí tu archivo o da click para buscar"
|
|
}}
|
|
</p>
|
|
<p>Tamaño máximo para el archivo: 20MB</p>
|
|
</div>
|
|
</section>
|
|
</b-upload>
|
|
</b-field>
|
|
|
|
<b-field class="centro">
|
|
<b-button
|
|
:disabled="file == ''"
|
|
class="border-info my-5 is-medium"
|
|
type="is-info"
|
|
tag="router-link"
|
|
to="/responsable"
|
|
>
|
|
Enviar
|
|
</b-button>
|
|
</b-field>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
file: "",
|
|
};
|
|
},
|
|
methods: {
|
|
validarTamaño() {
|
|
const TamMax = 20000000;
|
|
const archivo = this.file;
|
|
if (archivo.size > TamMax) {
|
|
this.toast();
|
|
this.file = "";
|
|
}
|
|
},
|
|
toast() {
|
|
this.$buefy.toast.open({
|
|
message: "El archivo excede el tamaño permitido",
|
|
type: "is-danger",
|
|
});
|
|
},
|
|
},
|
|
watch: {
|
|
file: function(newFile, oldFile) {
|
|
this.validarTamaño();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.centro {
|
|
text-align: center;
|
|
}
|
|
</style>
|