FileInputTab.vue 1.91 KB
Newer Older
Quentin David's avatar
Quentin David committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<template>
  <v-card outlined height=8em>
    <v-card-text
      class="justify-center text-center"
    >
      <v-file-input
        @change="updateValue()"
        multiple
        persistent-hint
        small-chips
        show-size
        :rules="rules"
        accept=".txt"
        

        v-model="files"
        :label="$t('file-input-label')"
        :hint="$t('file-input-hint')"
      >
      </v-file-input>
    </v-card-text>
  </v-card>
</template>
<script>
/* Documentations:
/ Restrict file extensions: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
/ Nice output for number of files and stuff, we might copy it: https://vuetifyjs.com/en/components/file-inputs/#complex-selection-slot
*/

// IDEAS:
// Persistent file input, clearable with the cross
// Total file size printed
const MAX_SIZE = 20000000;

export default {
  data: () => ({
    files: [],
    rules: [
      values => {
        var totalSize = 0;
        values.forEach( 
        (value) => {
          totalSize += value.size;
        });
        return !values || totalSize < MAX_SIZE || 'MAX SIZE dépassée'
      }
    ]
  }),
  props: ['isSelectedTab'],
  watch: {
    isSelectedTab: function() {
      if (!this.isSelectedTab) {
        this.files = [];
        this.updateValue();
      }
    }
  },
  computed: {
    totalSize() {
      var totalSize = 0;
      this.files.forEach(
        file => totalSize += file.size
      );
      return totalSize;
    }
  },
  methods: {
    printFiles() {
      this.files.forEach((e) => {
        console.log(e);
      })
    },
    updateValue() {
      this.$emit('file-input-update',this.files);
    }
  }
}
</script>
<i18n>
{
  "fr":{
    "file-input-label":"Choisissez un ou plusieurs fichiers",
    "file-input-hint":"Formats acceptés: PDF, TXT, ..."
  },
  "en":{
    "file-input-label":"Chose one or multiple files",
    "file-input-hint":"Accepted formats: PDF, TXT, ..."
  }
}
</i18n>