bryandidur/file-input.md

## file-input.md

      
    Raw
  

              file-input.md
            
          
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Client LAB</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row" style="margin: 25px 0;">
                <div class="col-md-4 col-md-offset-4">
                    <file-input classes="form-control" accept=".jpg,.png,.pdf" maxsize="2" v-model="form.files"></file-input>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <button class="btn btn-primary" @click="handleClick">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    Vue.component('file-input', {
        template: `
            <input type="file" :class="classes" :accept="accept" @change="handle">
        `,
        props: {
            classes: {
                type: String,
                default: '',
            },
            accept: {
                type: String,
                default: '.jpg,.png',
            },
            maxsize: {
                type: String,
                default: '4',
            },
        },
        data() {
            return {
                size: Number(this.maxsize) * 1000000,
            };
        },
        methods: {
            handle(event) {
                const { files } = event.target;

                for (let i = 0; i < files.length; i += 1) {
                    if (files[i].size > this.size) {
                        event.target.value = '';
                        this.$emit('input', []);
                        return;
                    }
                }

                this.$emit('input', event.target.files);
            },
        },
    });

    const App = new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    files: [],
                },
            };
        },
        methods: {
            handleClick() {
                console.log('CLICK', this.form.files);
            },
        },
    });
    </script>
</body>
</html>