how validate two file input with vue.js

Question

I simply validate one input file and get the file name. but I can not do it with second one.

<div id="app">
<form action="#">
<label class="btn btn-xs btn-primary">
    <input type="file" name="pic1" id="12" @change="onFileChangePic" multiple/>
    Upload file
</label>
{{fileName}}
<div><input type="submit" value="submit" :disabled="vvv == false"></div>
</form>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    fileName:null,
    vvv:false
  },
  methods:{
      onFileChangePic(event){
         var fileData =  event.target.files[0];
         this.fileName=fileData.name;

         if(fileData.type == 'application/pdf'){
            this.vvv = true
         }else{
            this.vvv = false
         }
         console.log(event);
      }
  }
})
</script>

i want to add

<input type="file" name="pic2" id="13" @change="onFileChangePic" multiple/>

how can I validate the second input too?

event.target.files[1]?

James Coyle
– James Coyle

2019-12-04 09:15:09 +00:00
Commented Dec 4, 2019 at 9:15 — James Coyle
– James Coyle, Commented Dec 4, 2019 at 9:15
I tried it. it didn't work

Bahram Ahady
– Bahram Ahady

2019-12-04 09:21:45 +00:00
Commented Dec 4, 2019 at 9:21 — Bahram Ahady
– Bahram Ahady, Commented Dec 4, 2019 at 9:21

Shivam Singh · Accepted Answer · 2019-12-05 08:27:03Z

1

methods:{
      onFileChangePic(event){
        let isGoodToGo = true
        let files = event.target.files
        for (let i=0; i<files.length; i++) {
            let file = files[i]
          if(file.type != 'application/pdf'){
            isGoodToGo = false
         }
        }
        this.vvv = isGoodToGo
      }
  }

Fiddle link: https://jsfiddle.net/shivampesitbng/k3h1x0jq/11/

Loop through all the files to check its type for validation.

edited Dec 5, 2019 at 8:27

answered Dec 4, 2019 at 11:55

Shivam Singh

1,7411 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how validate two file input with vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related