<template>
    <div id="upload">
        <input v-on:change="fileChange($event)" type="file" multiple />
        <p>selected {{fileCount}} files</p>
        <ul>
            <li v-bind:files="files" v-for="file in files">  
                {{ file.name }}
                <ul>
                    <li>size: {{ file.size / 1000 }} kB </li>
                    <li>type: {{ file.type }} </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script charset="utf-8">
import GetWorker from './workerInterface.js';
const w = GetWorker('main');

export default {
    data(){
        return {
            fileCount: 0,
            files: []
        }
    },
    methods: {
        fileChange(event) {
            // reset
            this.files = []


            console.log("change")
            this.fileCount = event.target.files.length
            this.files = event.target.files

            w.post({
                msg: 'new-upload',
                payload: [...this.files],
            })

            // Get sha256 of files
//            for (let file of this.files) {
//                w.post({
//                    msg: 'file-sha256',
//                    payload: file
//                })
//            }

        }
    }
}

</script>
