blah.js

So this function adds my canvas data to ipfs.

     canvasDataSend: function(){
        console.log('inside canvasDataSend')
        var c = document.getElementById('canvas');
        var base_image = null;
        
        var ctx = c.getContext("2d");
        var imgData = ctx.getImageData(0, 0, c.width, c.height);
        var buffer = imgData.data.buffer;

        console.log('value of canvas buffer before adding to ipfs: ', buffer)

        this.canvasNode.files.add([buffer], {pin: true}, (err, filesAdded)=>{
            if (err) { throw err }  
            console.log('inside canvasNode.files.add');
            this.canvasHash = filesAdded[0].hash;
            console.log('and value of this.canvasHash is .... ', this.canvasHash)
            console.log('value of entirety of filesAdded[0]', filesAdded[0])
            this.submitDataRequest(this.canvasHash, "profileCanvas");
        })
    }

I think it works because I my console shows:


value of canvas buffer before adding to ipfs:  
ArrayBuffer { byteLength: 325680 }
MeProfile.vue:272
inside canvasNode.files.add MeProfile.vue:276
and value of this.canvasHash is ....  QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn MeProfile.vue:278
value of entirety of filesAdded[0] 
Object { path: "QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn", hash: "QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn", size: 4 }

And here is how I retrieve the file::


                    console.log('inside canvasnodeready watch')
                    console.log('value of hashVal: ', hashVal)
                    console.log('this.canvasNode.files')
                    console.log(this.canvasNode.files)
                    this.canvasNode.files.cat(hashVal, (err, data) => {
                        console.log('inside profile canvasNode file cat')
                        console.log('and value of data')
                        console.log(data)
                        if (err) { 
                            console.log('some error in profileCanvas watch')
                            console.log('error; ', err)
                            throw err 
                        }  
                      <....>

which gives me the following in terminal: 
                      
              inside canvasnodeready watch MeProfile.vue:535
              value of hashVal:  QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn MeProfile.vue:536
              this.canvasNode.files MeProfile.vue:537
              Object { add: Getter & Setter, addReadableStream: Getter & Setter, addPullStream: Getter & Setter, cat: Getter & Setter, catReadableStream: Getter & Setter, catPullStream: Getter & Setter, get: Getter & Setter, getReadableStream: Getter & Setter, getPullStream: Getter & Setter, lsImmutable: Getter & Setter, … }
              MeProfile.vue:538
              inside profile canvasNode file cat MeProfile.vue:540
              and value of data MeProfile.vue:541
              undefined MeProfile.vue:542
              some error in profileCanvas watch MeProfile.vue:544
              error;  Error: "this dag node is a directory"
                      
This seems very strange to me - I get a hash and store the file successfully as an array buffer. 
When I attempt to retrieve the file the data is undefined and I get the "dag node is directory" error. 
What gives?