Image required validation using vee-validate vue

Question

I'm new to vueJS.

I want to add a required validator in image using vee-validate.

Built-in required validador isn't working so I created a custom validator img_required.

here's what I've done so far.

.vue html part

<ValidationProvider rules="image|img_required" bail="false" v-slot="{ errors, validate }">
  <div class="row row-xs mg-t-20 mx-0">
    <label class="col-sm-4 form-control-label">
      <span class="tx-danger">*</span> Image:
    </label>
    <div
      @dragover.prevent
      @change="validate"
      @drop.prevent
      class="file-wrapper col-sm-8 mg-t-10 mg-sm-t-0"
    >
      <div v-if="imgUrl">
        <button @click="imageNull" class="img-close">
          <b-icon icon="x"></b-icon>
        </button>
        <img style="height: 127px" :src="imgUrl" />
      </div>
      <input type="text" hidden v-model="imgUrl" />
      <div v-if="!imgUrl" @drop="handleImage($event, 'drop')">
        <input
          type="file"
          class="form-control"
          name="file"
          accept="image/*"
          @change="handleImage($event, 'input'); validate()"
        />
        Drop image
      </div>
    </div>
  </div>
  <div v-for="error in errors" :key="error">{{ error }}</div>
</ValidationProvider>

I can't use v-model in input type file so I created a dummy hidden input field and passed imgUrl in v-model <input type="text" hidden v-model="imgUrl" />

imgUrl gets image src from file drop or input file.

I added a close button to nullify imgUrl variable.

<button @click="imageNull" class="img-close">
      <b-icon icon="x"></b-icon>
</button>

I pass this imgUrl to vee-validate extend method.

.vue script part

data() {
    return {
      imgUrl: ""
    }
},
methods: {
    handleImage(e, action) {
      var file;
      if (action == "input") file = e.target.files[0];
      else if (action == "drop") file = e.dataTransfer.files[0];
      var reader = new FileReader();
      reader.onload = (e) => {
        this.imgUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    imageNull() {
      this.imgUrl = "";
    },
}

here's validation.js file

extend('img_required', {
    validate(imgUrl) {
        console.log(imgUrl);
        return imgUrl !== "";
    },
    message() {
        return "Image is required!";
    }
});

Here I'm checking if imgUrl is an empty base64 string or not.

And when I hit close button, imgUrl nullifies.

The issue here is when I print this imgUrl it shows event.target.files.

I'm new to vue.js. Please tell me if I'm doing something wrong

ssten ssten · Accepted Answer · 2020-09-01T14:08:41

I think the problem is that you're handleImage function is not correct

Try this;

var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
  this.imgUrl = reader.result;
};

Image required validation using vee-validate vue

1 Answers