Does this plugin supports validation for image file size?

How can you use vuelidate with image uploading validation? Currently I’m uploading the image and pass it to the API using base64. Is there I way when I upload image it will validate that the image file size cannot be higher than 5mb?

currently I only handle the required field.

import { required } from 'vuelidate/lib/validators';
validations: {
  profileImage: { required }
}

[guillem-catala]

What about something like this

import { helpers } from 'vuelidate/lib/validators'

export const isValidFileSize = (options = {}) => {
  return helpers.withParams(options, value => {
    if (!value) {
      return true
    }
    const fileSizeinKb = value.size / 1024
    const size = Math.round(fileSizeinKb * 100) / 100 // convert up to 2 decimal place
    return size <= options.maxFileSizeInB / 1024
  })
}

[mpm-myoko]

With reference to the above code, I adapted to my requirement. The validation:

const isTrueImage = (value) => {
	if (!value) {
    	    return true;
  	}
  	let file = value;
  	return file.type.startsWith('image');
}

The template:

<div class="my-3 p-3 border" id="logo">
	<div class="form-group">
		<label>Logo</label>
		<div :class="['custom-file',$v.form.logo.$error?'is-invalid':'']">
			<input type="file" class="custom-file-input" @change="onLogoChange($event)">
			<label class="custom-file-label">Choose File</label>
		</div>
		<div class="invalid-feedback">
                    <div class="error" v-if="!$v.form.logo.isTrueImage">Invalid image file.</div>
               </div>
	</div>
	<img :src="form.logo_url" class="rounded-circle img-thumbnail logo"  />
</div>

The component:

export default {
	data() {
		return {			
			form: {				
				logo: '',
				logo_url: '',
			},
		}
	},
	methods: {
		onLogoChange(e) {			
			const files =  e.target.files || e.dataTransfer.files;
			const file = files[0];
                        this.form.logo = file;  // --Important: you have to set the value here
                        this.$v.form.logo.$touch(); // --And validate with the plugin
			if (this.$v.form.logo.$error) return;			
			this.form.logo_url = URL.createObjectURL(file);
		}
	},	
	validations: {
		form: {
			logo: { isTrueImage },
		}
	}
}