{"id":28764,"date":"2021-08-14T18:29:00","date_gmt":"2021-08-14T16:29:00","guid":{"rendered":"https:\/\/pi3g.com\/?p=28764"},"modified":"2021-08-14T18:29:00","modified_gmt":"2021-08-14T16:29:00","slug":"synchronizing-file-uploads-between-browser-windows","status":"publish","type":"post","link":"https:\/\/pi3g.com\/de\/synchronizing-file-uploads-between-browser-windows\/","title":{"rendered":"Synchronisieren von Dateiuploads zwischen Browserfenstern"},"content":{"rendered":"

For PiCockpit<\/a>, I am currently developing the Digital Nose app.<\/p>\n

This app requires an upload for the BSEC configuration file \u2013 which is binary data. <\/p>\n

Once the user uploads the file, it gets published via MQTT, and picockpit-client can use it to configure the BSEC AI algorithm to do gas detection.<\/p>\n

Here is a little preview of part of the webinterface:<\/p>\n

\"image\"<\/a><\/p>\n

Vuetify ships with a built-in GUI element, v-file-input:<\/p>\n

\n

<v-file-input
     v-model=”bsecFile”
     label=”BSEC Configuration File from AI Studio (.config)”
     placeholder=”Upload your BSEC configuration file here”
     prepend-icon=”mdi-paperclip”
     outlined
     dense
     show-size
     accept=”.config”
     @change=”doUpload”
\n>
\n<\/v-file-input><\/p>\n

<\/p>\n<\/blockquote>\n

In this case, bsecFile <\/strong>is my model. <\/p>\n

Note: Since it is a model, it can also be written to!<\/p>\n

Publishing on MQTT<\/h2>\n

This is how the handler code doUpload looks like (still including debug info):<\/p>\n

\n

    doUpload(){
         console.log(“model:”);
         console.log(this.bsecFile);
         if (this.bsecFile){
             \/\/ the code below does not work reliably, although it should in theory
             \/\/ if (this.bsecFile.name.split(“.”)[1] != “config”){
             \/\/     console.log(“The filename does not include .config – resetting.”);
             \/\/     this.bsecFile = null;
             \/\/ }
             \/\/ else {
                 console.log(“the variable seems to be OK, trying to publish”);
                 var reader = new FileReader();
                 reader.addEventListener(‘load’, (event) => {
                     console.log(“File read successfully! publishing (now with Uint8Array).”);
                     \/\/ fn = filename, fs = file size, fd = file (binary) data
                     const msg = {
                           fn: this.bsecFile.name,
                           fs: this.bsecFile.size,
                           fd: new Uint8Array (event.target.result)
                     }
                     console.log(“message is:”);
                     console.log(msg);
                     this.$emit(“bsec-upload-event”, true);
                     myMqtt.sendWBasePath(sensorSetBsecPath, msg, 1, true);                   
                 });
                 reader.readAsArrayBuffer(this.bsecFile);
         }
         else {
             console.log(“the file was just cleared, so we should remove it … sending $nofile as true”);
             const msg = {
                 “$nofile”: true
             }
             console.log(“message is:”);
             console.log(msg);
             this.$emit(“bsec-upload-event”, false);
             myMqtt.sendWBasePath(sensorSetBsecPath, msg, 1, true);
         }
     } <\/p>\n

<\/p>\n<\/blockquote>\n

Note that I publish a message which includes binary data.<\/p>\n

I use a constructor for a new Uint8Array to which I pass event.target.result \u2013 an ArrayBuffer. <\/p>\n

This way, the data gets passed on precisely as it is. <\/p>\n

We use MsgPack to pack the JavaScript Object into a message \u2013 which supports binary data.<\/p>\n

On the other side, PiCockpit Client takes the binary message, and can reinstate a (in that case) Python object, including the binary data.<\/p>\n

Making it work for synchronizing across browser windows<\/h2>\n

A second task is to synchronize the state across different browser windows and also sessions of the user. <\/p>\n

When the user returns, we would like to present the file as already having been uploaded to them. <\/p>\n

What I want to do is essentially to build a new File Object instance in JavaScript, from my Uint8Array to recreate the file from the MQTT message!<\/p>\n

We subscribe & listen to the MQTT message, of course. And then we monitor the variable for changes, and modify the model bsecFile as follows:<\/p>\n

<\/p>\n

\n

globalBsecFileWrapped(val){
     \/\/ this will ONLY be updated if we were not responsible for sending the message in the first place.
     console.log(“watch > globalBsecFileWrapped > contents:”);
     console.log(this.globalBsecFileWrapped);
     console.log(“we’re going to set this as a file now … “);
     if (this.globalBsecFileWrapped.hasOwnProperty(“$nofile”)){
         if (this.globalBsecFileWrapped[‘$nofile’]){
             \/\/ update it to be null – it was reset from a different browser.
             this.bsecFile = null;
         }
     }
     else if (this.globalBsecFileWrapped.hasOwnProperty(“fd”) && this.globalBsecFileWrapped.hasOwnProperty(“fn”)) {
         \/\/ attempt 2
         \/\/ this.bsecFile = new File(this.globalBsecFileWrapped.fd, this.globalBsecFileWrapped.fn);
         this.bsecFile = new Blob([this.globalBsecFileWrapped.fd], {type: “application\/octet-stream”});
         this.bsecFile.name = this.globalBsecFileWrapped.fn;
         \/\/ debug
             var reader = new FileReader();
             reader.addEventListener(‘load’, (event) => {
                 console.log(“Debug >> File read successfully! publishing (now with Uint8Array).”);
                 \/\/ fn = filename, fs = file size, fd = file (binary) data
                 const msg = {
                       fn: this.bsecFile.name,
                       fs: this.bsecFile.size,
                       fd: new Uint8Array (event.target.result)
                 }
                 console.log(“message is:”);
                 console.log(msg);
             });
             reader.readAsArrayBuffer(this.bsecFile);               
     }
\n}<\/p>\n<\/blockquote>\n

note the important parts here:<\/p>\n

\n

this.bsecFile = new Blob([this.globalBsecFileWrapped.fd], {type: “application\/octet-stream”});
\nthis.bsecFile.name = this.globalBsecFileWrapped.fn;\n<\/p>\n<\/blockquote>\n

So, in order to recreate the file (and have the vuetify v-file-input update to the correct file (showing size appropriately, and filename) we are constructing a new Blob. <\/p>\n

Important: the Blob needs to have the type of \u201capplication\/octet-stream\u201d \u2013 otherwise it is going to be interpreted as something different and the filesize will not match anymore!<\/strong><\/p>\n

And finally, we set the new name \u2013 that\u2019s it!<\/p>\n

<\/p>\n

Looking to solve similar problems?<\/h2>\n

We are available for hire<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

F\u00fcr PiCockpit entwickle ich derzeit die Digital Nose App. Diese App erfordert einen Upload f\u00fcr die BSEC-Konfigurationsdatei, bei der es sich um Bin\u00e4rdaten handelt. Sobald der Benutzer die Datei hochl\u00e4dt, wird sie \u00fcber MQTT ver\u00f6ffentlicht, und der PiCockpit-Client kann sie verwenden, um den BSEC-KI-Algorithmus f\u00fcr die Gaserkennung zu konfigurieren. Hier ist eine kleine...<\/p>","protected":false},"author":830,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[822],"tags":[873,973,974,599,824,975,976,739],"class_list":["post-28764","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-blob","tag-file","tag-file-upload","tag-mqtt","tag-msgpack","tag-sync-between-messages","tag-v-file-input-usage-example","tag-vuetify"],"_links":{"self":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/28764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/users\/830"}],"replies":[{"embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/comments?post=28764"}],"version-history":[{"count":1,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/28764\/revisions"}],"predecessor-version":[{"id":28765,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/28764\/revisions\/28765"}],"wp:attachment":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/media?parent=28764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/categories?post=28764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/tags?post=28764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}