worker thread interface

.eslintrc.js

@@ -4,5 +4,8 @@ module.exports = {
     extends: [
         'eslint:recommended',
         'plugin:vue/essential'
-    ]
+    ],
+    rules: {
+        'no-console': 'off'
+    }
 }

src/App.vue

@@ -0,0 +1,21 @@
+<template>
+    <div id="app">
+        <upload></upload>
+    </div>
+</template>
+
+<script charset="utf-8">
+import Upload from './upload.vue';
+
+export default {
+    name: 'app',
+    data() {
+        return {
+            msg: 'Hello World'
+        }
+    },
+    components: {
+        Upload,
+    }
+}
+</script>

src/index.js

@@ -2,8 +2,10 @@ import './styles/index.css';
 
 import Vue from 'vue';
 import App from './App.vue';
+import GetWorker from './workerInterface.js'
 
-new Vue({
+
+window.app = new Vue({
     el: '#app',
     template: '<App/>',
     components: { App }

src/upload.vue

@@ -0,0 +1,50 @@
+<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
+
+            // Get sha256 of files
+            for (let file of this.files) {
+                w.post({
+                    msg: 'file-sha256',
+                    payload: file
+                })
+
+            }
+        }
+    }
+}
+
+</script>

src/worker.js

@@ -0,0 +1,28 @@
+//This worker will be used for cryptographic, long running and API calls
+//to keep the UI free
+//
+const name = 'main'
+
+function getSHA256(file){
+    console.log('getting sha 256 for ');
+    console.log(file);
+
+}
+
+onmessage = function(e) {
+
+    switch (e.data.msg) {
+        case 'init':
+            console.log(`initialized ${name} worker`);
+            break;
+
+        case 'file-sha256':
+            getSHA256(e.data.payload)
+            break;
+
+        default:
+            console.log(`${name} worker: need {msg: "message type", ... }`)
+
+    }
+
+}

src/workerInterface.js

@@ -0,0 +1,33 @@
+
+class Worker {
+    constructor(script) {
+        if (window.Worker) {
+            this.worker = new window.Worker(script);
+
+            this.onmessage = this.worker.onmessage;
+        }
+    }
+
+    post(m) {
+        this.worker.postMessage(m)
+    }
+}
+
+const workers = {
+    'main': new Worker('./worker.js')
+}
+
+
+
+
+
+function getWorker(name){
+    if (name in workers) {
+        return workers[name];
+    } else {
+        console.log(`unknown worker ${name}`)
+    }
+}
+
+
+export default getWorker;