Upload metadata (multifile) + wip upload files + cors

server

@@ -1 +1 @@
-Subproject commit 423ba0e52ceb70b685af6118eead2d9d77e25469
+Subproject commit f0c82217fdcdf03cae66453c398802c82a4512f7

src/api.js

@@ -11,7 +11,7 @@ function getEndpoint (path)  {
 
 const endPoints = {
     get upload () {
-        return getEndpoint('upload')
+        return getEndpoint('upload/')
     }
 
 }
@@ -27,22 +27,24 @@ const apiEndpoint = function() {
 
 class Upload {
 
-    constructor(files) {
-        this.files = Array.from(files)
+    constructor(filesMetadata, fileObjects) {
+        this.filesMetadata = Array.from(filesMetadata)
+        this.fileObjects = fileObjects
         this.timestamp = new Date()
     }
 
-    get payload() {
+    get uploadMetadata() {
+
         return {
-            files: this.files,
+            files: this.filesMetadata,
             timestamp: this.timestamp,
         }
     }
 
     async create()  {
-        let req = new Request(endPoints.upload, {
+        let req = new Request(endPoints.upload , {
             method: 'POST',
-            body: JSON.stringify(this.payload)
+            body: JSON.stringify(this.uploadMetadata)
         })
 
         //let result = await fetch(req);
@@ -54,7 +56,35 @@ class Upload {
             throw(`${res.status}: `  + (await res.json()).error)
         }
 
-        return res.json()
+        return res.json().then(data => {
+            let { result: { id: id } } = data
+            this.uploadId = id
+            return data
+        })
+    }
+
+    async send(){
+        console.log(`Sending with id ${this.uploadId}`)
+
+        let formData = new FormData();
+        for (let file of this.fileObjects) {
+            console.log(file)
+            formData.append('upload[]', file)
+        }
+
+
+        let req = new Request(endPoints.upload + this.uploadId, {
+            method: 'PUT',
+            body: formData
+        })
+
+        let res = await fetch(req)
+        .catch((e) => {console.error(e)})
+
+        if (!res.ok){
+            throw(`${res.status}: `  + (await res.json()).error)
+        }
+
     }
 }
 

src/upload.vue

@@ -18,6 +18,11 @@
 import GetWorker from './workerInterface.js';
 const w = GetWorker('main');
 
+w.listenTo('upload-id', (e) => {
+    console.log('vue received upload id ', e.data.id)
+})
+
+
 export default {
     data(){
         return {
@@ -31,7 +36,6 @@ export default {
             this.files = []
 
 
-            console.log("change")
             this.fileCount = event.target.files.length
             this.files = event.target.files
 

src/worker.js

@@ -30,7 +30,7 @@ async function getSHA256(file){
 }
 
 async function newUpload(files){
-    let payloadFiles = await Promise.all(files.map(async (f) => {
+    let filesMetadata = await Promise.all(files.map(async (f) => {
         return {
             lastModified: f.lastModified,
             type: f.type,
@@ -48,8 +48,19 @@ async function newUpload(files){
 
     //}
 
-    let upload = new Api.Upload(payloadFiles)
-    return upload.create()
+    let upload = new Api.Upload(filesMetadata, files)
+
+     await upload.create()
+     .then(data => {
+         // Get the upload id
+        let { result: { id: id } } = data
+
+         // Notify the UI
+        postMessage({msg: 'upload-id', id: id})
+
+         // Send the files
+         upload.send()
+     })
 
 }
 

src/workerInterface.js

@@ -1,15 +1,33 @@
 
 class Worker {
+
     constructor(script) {
         if (window.Worker) {
             this.worker = new window.Worker(script);
-            this.onmessage = this.worker.onmessage;
+            this.worker.onmessage = this.onmessage()
+            this.listeners = {}
+
             this.post({
                 msg: 'init'
             })
         }
     }
 
+    listenTo(ev, callback) {
+        this.listeners[ev] = callback
+    }
+
+
+    onmessage() {
+        let self = this
+        return function(e) {
+            if ((e.data.msg in self.listeners) === true) {
+                self.listeners[e.data.msg](e)
+
+            }
+        }
+    }
+
     post(m) {
         this.worker.postMessage(m)
     }