cloudinary-upload-contact-barcode.vue

<template>
  <div class="ph4 pv3 bg-washed-red vh-100">
    <!-- header goes here -->

    <div class="flex flex-wrap justify-between">
      <form class="tc w-50-ns w-100 mt4 ph5-ns" @submit.prevent="upload">
         <!-- form field goes here --></div>
        <button class="f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green pointer tl mv3" type="submit">Generate Barcode</button>
      </form>

      <section class="w-50-ns w-100 tl pa3">
        <ul v-if="errors.length > 0">
          <li v-for="(error,index) in errors" :key="index">{{error}}</li>
        </ul>
        <VueBarcode ref="barcode" :value="contactName + ' ' + contactNumber" tag="img" name="barcode.png" class="dn"></VueBarcode>
        <p v-show="showProgress" class="black-80 tc i">image loading...</p>
        <section v-if="results && results.secure_url">
          <img :src="results.secure_url" :alt="results.public_id" class="mv3" />
        </section>
      </section>
    </div>
  </div>
</template>

<script>
  import VueBarcode from '@chenfengyuan/vue-barcode';

export default {
  components: {
    VueBarcode
  },
  data(){
    return {
      contactName: '',
      contactNumber: 0,
      results: null,
      errors: [],
      file: null,
      cloudName: "moerayo",
      preset: "lan9vkdw",
      tags: "browser-upload",
      fileContents: null,
      formData: null,
      showProgress: false,
    }
  }, 
  mounted(){
    this.handleImageAttachment()
  },
  methods: {
    handleImageAttachment() {
      this.file = this.$refs.barcode.$attrs
    },
    prepareFormData() {
      this.formData = new FormData();
      this.formData.append("upload_preset", this.preset);
      this.formData.append("tags", this.tags); // Optional - add tag for image admin in Cloudinary
      this.formData.append("file", this.fileContents);
    },

    // function to upload image and return it from Cloudinary
    upload () {
      if (this.contactName < 1 || this.contactNumber < 1) {
        this.errors.push("You must fill the empty fileds to generate the barcode");
        return;
      }
      // clear errors
      else {
        this.errors = [];
      }
      this.fileContents = this.$refs.barcode.$el.currentSrc;
      this.prepareFormData();
      const cloudinaryUploadURL = `https://api.cloudinary.com/v1_1/${this.cloudName}/upload`;
      const requestObj = {
        url: cloudinaryUploadURL,
        method: "POST",
        data: this.formData,
      };
      this.showProgress = true;
      this.$axios(requestObj)
        .then(response => {
          this.results = response.data;
        })
        .catch(error => {
          this.errors.push(error);
        }).finally(() => {
          setTimeout(
            function() {
              this.showProgress = false;
            }.bind(this),
            1000
          );
        })
      },
    }
  }
</script>