validate input type="file" programmatically

Versions:

• VueJs: “^1.0.26”
• Vee-Validate: “^1.0.0-beta.8”

Description:

Is it possible to validate an programmatically?

Basically, I want to validate, image type, and size… but does not seem to work at all…

<div class="form-group" :class="{'has-error': errorsPersonal.has('imageValidate') }">
    <div class="col-md-12">
        <div id="jcrop" class="center-block"></div>
    </div>

    <div class="col-md-12 text-center marginTop10">
        <label class="btn btn-info">
            select image&hellip; <input type="file" style="display: none;" class="form-control" id="file" name="instructor_picture" v-el="instructor_picture">
        </label>
        <span v-show="errorsPersonal.has('imageValidate')" class="profile-error help-block">{{ errorsPersonal.first('imageValidate') }}</span>
    </div>
</div>

...

computed: {
    ...

    imageValidate: function() {
        var files = this.$$.instructor_picture.files; // does not recognize instructor_picture
        return files[0];
    },
    ...
},
...

watch: {
    ...

    imageValidate(value) {
        this.validatorPersonal.validate('imageValidate', value);
    },
    
    ...
},


created: function() {
    ...
    this.validatorPersonal = new Validator({
        nameValidate: 'required|min:3',
        lastNameValidate: 'required|min:3',
        personalCountryValidate: 'required',
        personalLanguageValidate: 'required',
        emailValidate: 'required|email|email_exists',
        phoneValidate: 'required',
        passwordValidate: 'required|min:8|verify_password',
        passwordConfirmValidate: 'confirmed:password',
        aboutMeValidate: 'required|max:750',
        imageValidate: 'ext:jpg|mimes:image/jpeg|size:10000'
    });
    this.$set('errorsPersonal', this.validatorPersonal.errorBag);
    ...
},


methods: {
    ...
    validatePersonal() {
        var validationObject = {
            nameValidate: this.nameValidate,
            lastNameValidate: this.lastNameValidate,
            personalCountryValidate: this.personal_country_validate,
            personalLanguageValidate: this.personal_language_validate,
            phoneValidate: this.phoneValidate,
            emailValidate: this.emailValidate,
            passwordValidate: this.passwordValidate,
            passwordConfirmValidate: this.passwordConfirmValidate,
            aboutMeValidate: this.aboutMeValidate,
            imageValidate: this.imageValidate
        };

        this.validatorPersonal.validateAll(validationObject);
    },
    ...
},

There might be a problem in the lines below, I have changed it a bit, used: v-el:instructor_picture, but still nothing working

<input type="file" style="display: none;" class="form-control" id="file" name="instructor_picture" v-el="instructor_picture">

imageValidate: function() {
        var files = this.$$.instructor_picture.files; // does not recognize instructor_picture
        return files[0];
    },

Thanks in advance! Max

[logaretm]

@3zzy You used an incorrect format when specifying args for the ext rule, in string format it accepts a comma separated list. but in object format it accepts an array containing the args, they are not interchangeable.

So instead of:

v-validate="{ ext: 'png,jpg,gif' }"

Use:

v-validate="{ 'ext':['png','jpg','gif'] }

Also when using native file inputs, the data-vv-value-path does not have an effect.

[logaretm]

It is very possible, The files validators accept a Files array, not a single file since a file input can be multiple. instead of sending files[0] to the validation, try to send the entire files collection.