pcpuma_unam_operador/components/admin/SubirCsv.vue

<template>
  <section>
    <b-field>
      <b-upload
        type="is-black"
        class="mb-5"
        @input="validarCsv()"
        v-model="csv"
        drag-drop
        expanded
      >
        <section
          class="
            section
            is-flex is-align-items-center is-justify-content-center
            drag-drop
          "
        >
          <div class="content has-text-centered">
            <p>
              <b-icon icon="upload" size="is-large" />
            </p>

            <p>
              {{
                csv.name || 'Arrastra aquí tu archivo o da click para buscar'
              }}
            </p>
          </div>
        </section>
      </b-upload>
    </b-field>

    <div class="has-text-centered mb-6">
      <b-button
        type="is-info"
        :disabled="!csv.name"
        @click="
          $alertsGenericos.imprimirWarning(
            $buefy,
            '¿Esta segur@ de querer subir este archivo?',
            cargaMasiva
          )
        "
      >
        Subir
      </b-button>
    </div>
  </section>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    updateIsLoading: { type: Function, required: true, default: () => {} },
    path: { type: String, required: true, default: '' },
  },
  data() {
    return {
      csv: {},
    }
  },
  methods: {
    validarCsv() {
      const extPermitidas = /(.csv)$/i

      if (!extPermitidas.exec(this.csv.name)) {
        this.csv = {}
        this.$alertsGenericos.imprimirError(this.$buefy, this.$router, {
          message:
            'El archivo seleccionado no es un csv. Asegurese de escoger un archivo valido.',
        })
      }
    },
    cargaMasiva() {
      const formData = new FormData()

      this.updateIsLoading(true)
      formData.append('csv', this.csv)
      return axios
        .post(
          `${process.env.api}/${this.path}`,
          formData,
          this.$getToken.tokenFile()
        )
        .then((res) => {
          this.csv = {}
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
  },
}
</script>

<style>
.drag-drop {
  height: 50vh;
}
</style>