<commit_before><template>
    <label :class="[custom?'custom-file':null,inputClass]"
           @dragover.stop.prevent="dragover"
    >

        <!-- Drop Here Target -->
        <span class="drop-here"
              v-if="dragging"
              @dragover.stop.prevent="dragover"
              @drop.stop.prevent="drop"
              @dragleave.stop.prevent="dragging=false"
              :data-drop="dropLabel"
        ></span>

        <!-- Real Form input -->
        <input type="file"
               :name="name"
               :id="id"
               :disabled="disabled"
               ref="input"
               :accept="accept"

               class="custom-file-input"
               @change="onFileChange"
               :multiple="multiple"
               :webkitdirectory="directory"
        >

        <!-- Overlay Labels -->
        <span :class="['custom-file-control',dragging?'dragging':null,inputClass]"
              :data-choose="computedChooseLabel"
              :data-selected="selectedLabel"
              v-if="custom"
        ></span>

    </label>
</template>

<style>
    .custom-file-control {
        overflow: hidden;
    }

    .custom-file-control {
        overflow: hidden;
    }

    .custom-file-control.dragging {
        overflow: hidden;
        filter: blur(3px);
    }

    .custom-file-control::after {
        content: attr(data-selected);
    }

    .custom-file-control::before {
        content: attr(data-choose);
    }

    .custom-file .drop-here {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 3px;
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .custom-file .drop-here::before {
        color: white;
        content: attr(data-drop);
    }

</style>

<script>
    import formMixin from '../mixins/form';

    export default {
        mixins: [formMixin],
        data() {
            return {
                selectedFile: null,
                dragging: false
            };
        },
        computed: {
            selectedLabel() {
                if (!this.selectedFile || this.selectedFile.length === 0) {
                    return this.placeholder || 'No file chosen';
                }

                if (this.multiple) {
                    if (this.selectedFile.length === 1) {
                        return this.selectedFile[0].name;
                    }

                    return this.selectedFormat
                        .replace(':names', this.selectedFile.map(file => file.name).join(','))
                        .replace(':count', this.selectedFile.length);
                }

                return this.selectedFile.name;
            },
            computedChooseLabel() {
                return this.chooseLabel || (this.multiple ? 'Choose Files' : 'Choose File');
            }
        },
        watch: {
            selectedFile(newVal, oldVal) {
                if (newVal === oldVal) {
                    return;
                }

                if (!newVal && this.multiple) {
                    this.$emit('input', []);
                } else {
                    this.$emit('input', newVal);
                }
            }
        },
        methods: {
            onFileChange(e) {
                // Always emit original event
                this.$emit('change', e);

                // Check if special `items` prop is available on event (drop mode)
                // Can be disabled by setting no-traverse
                const items = e.dataTransfer && e.dataTransfer.items;
                if (items && !this.noTraverse) {
                    let queue = [];
                    for (let i = 0; i < items.length; i++) {
                        let item = items[i].webkitGetAsEntry();
                        if (item) {
                            queue.push(this.traverseFileTree(item));
                        }
                    }
                    Promise.all(queue).then(filesArr => {
                        this.setFiles(Array.prototype.concat.apply([], filesArr));
                    });
                    return;
                }

                // Normal handling
                this.setFiles(e.target.files || e.dataTransfer.files);
            },
            setFiles(files) {
                if (!files) {
                    this.selectedFile = null;
                    return;
                }<commit_msg>ESLint<commit_after><template>
    <label :class="[custom?'custom-file':null,inputClass]"
           @dragover.stop.prevent="dragover"
    >

        <!-- Drop Here Target -->
        <span class="drop-here"
              v-if="dragging"
              @dragover.stop.prevent="dragover"
              @drop.stop.prevent="drop"
              @dragleave.stop.prevent="dragging=false"
              :data-drop="dropLabel"
        ></span>

        <!-- Real Form input -->
        <input type="file"
               :name="name"
               :id="id"
               :disabled="disabled"
               ref="input"
               :accept="accept"

               class="custom-file-input"
               @change="onFileChange"
               :multiple="multiple"
               :webkitdirectory="directory"
        >

        <!-- Overlay Labels -->
        <span :class="['custom-file-control',dragging?'dragging':null,inputClass]"
              :data-choose="computedChooseLabel"
              :data-selected="selectedLabel"
              v-if="custom"
        ></span>

    </label>
</template>

<style>
    .custom-file-control {
        overflow: hidden;
    }

    .custom-file-control {
        overflow: hidden;
    }

    .custom-file-control.dragging {
        overflow: hidden;
        filter: blur(3px);
    }

    .custom-file-control::after {
        content: attr(data-selected);
    }

    .custom-file-control::before {
        content: attr(data-choose);
    }

    .custom-file .drop-here {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 3px;
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .custom-file .drop-here::before {
        color: white;
        content: attr(data-drop);
    }

</style>

<script>
    import formMixin from '../mixins/form';

    export default {
        mixins: [formMixin],
        data() {
            return {
                selectedFile: null,
                dragging: false
            };
        },
        computed: {
            selectedLabel() {
                if (!this.selectedFile || this.selectedFile.length === 0) {
                    return this.placeholder || 'No file chosen';
                }

                if (this.multiple) {
                    if (this.selectedFile.length === 1) {
                        return this.selectedFile[0].name;
                    }

                    return this.selectedFormat
                        .replace(':names', this.selectedFile.map(file => file.name).join(','))
                        .replace(':count', this.selectedFile.length);
                }

                return this.selectedFile.name;
            },
            computedChooseLabel() {
                return this.chooseLabel || (this.multiple ? 'Choose Files' : 'Choose File');
            }
        },
        watch: {
            selectedFile(newVal, oldVal) {
                if (newVal === oldVal) {
                    return;
                }

                if (!newVal && this.multiple) {
                    this.$emit('input', []);
                } else {
                    this.$emit('input', newVal);
                }
            }
        },
        methods: {
            onFileChange(e) {
                // Always emit original event
                this.$emit('change', e);

                // Check if special `items` prop is available on event (drop mode)
                // Can be disabled by setting no-traverse
                const items = e.dataTransfer && e.dataTransfer.items;
                if (items && !this.noTraverse) {
                    const queue = [];
                    for (let i = 0; i < items.length; i++) {
                        const item = items[i].webkitGetAsEntry();
                        if (item) {
                            queue.push(this.traverseFileTree(item));
                        }
                    }
                    Promise.all(queue).then(filesArr => {
                        this.setFiles(Array.prototype.concat.apply([], filesArr));
                    });
                    return;
                }

                // Normal handling
                this.setFiles(e.target.files || e.dataTransfer.files);
            },
            setFiles(files) {
                if (!files) {
                    this.selectedFile = null;
                    return;
                }
{'fraction_non_alphanumeric': 0.1244620986428335, 'fraction_numerical': 0.0041928721174004195, 'mean_word_length': 1.1710179640718563, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7561197', 'n_tokens_mistral': 2451, 'n_tokens_neox': 2269, 'n_words': 432}