Vee-validate: validate input type="file" programmatically

[max76]

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

[max76]

update: it still doesn't work, but I think I am closer.

<input type="file" style="display: none;" class="form-control" id="file" name="instructor_picture" v-el:instructor_picture @change="fileChange()" />

fileChange(e) {
    var files = this.$els.instructor_picture.files;
    this.uploadAttemptImage = files[0];
},

computed: {
    imageValidate: function() {
        return this.uploadAttemptImage;
    },
}

In the console, I can now see imageValidate() producing the following console.log

File {name: "IMAG0494.jpg", lastModified: 1470161770000, lastModifiedDate: Tue Aug 02 2016 20:16:10 GMT+0200 (CEST), webkitRelativePath: "", size: 420857…}

Still, the validation seems not to be working... it does not validate anything.

[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.

[max76]

Hi Logaretm, I will try this later tonight... thanks for the tip. All best,Max

[max76]

Hi Logaretm, using Files instead of files[0] did the trick.

Thanks!
Max

[3zzy]

@logaretm I simplified my component to use an input type=file directly, however I can't get that to work either since documentation is lacking on input file validation .

I've created a codesandbox: https://codesandbox.io/embed/98zomv972y

If you try to add a valid file it still says field must be a valid file.

[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.