Regarding file retrieval

[mariam-crissi]

I am trying to add and retrieve file...I am using ipfs-api along with truffle.

I am using FileReader to read the content.Based on the content generate hash and store the hash in blockchain.

     var ipfsAPI = require('ipfs-api');
      myFunction:function(){
              var file = document.getElementById("fileForUpload").files[0];
                        ipfs.files.add(new Buffer(file), function (err, res){                      
                                  if(err || !res) return console.error("ipfs add error", err, res);
                                  else{
                                               console.log(res);
                                               res.forEach(function(text) {
                                                             console.log('successfully stored', text.hash);
                                                             textaddress=text.hash;
                                                             console.log(textaddress);                          
                                                             SimpleStorage.deployed().then(function(instance) {
                                                                         console.log("Initializing set function");
                                                                          instance.set(textaddress,{from: account, gas: 3000000, value: web3.toWei(1, 'ether')})
                                                                               .then(function(v){
                                                                                             console.log(v);
                                                                                             console.log("Function  set Executed");                               
                                         
                                                                              });

                                                         }).catch(function(e) {
                                                                                  console.log(e);
                                                         });  

                                            });
                              }
   
                });

                        
        }

Then trying to retrieve hash from blockchain and using retrieved hash , print content in javascript console.And I have to display it in html.How can it be possible?

          secondFunction:function(){
                 
                 SimpleStorage.deployed().then(function(instance) {
                            instance.getvalue({from: account, gas: 3000000, value: web3.toWei(1, 'ether')})
                                  .then(function(v){
                                           console.log(v);
                                           console.log("Function  get Executed");
                                           var test = instance.LOG_TextIPFS({from: account});
                                           console.log(test);
                                           test.watch(function(err, result) {
                                                        if (err) {
                                                                      console.log(err);
                                                                       return;
                                                         }
                                                         console.log(result.args.storeddata);
                                                          hash=result.args.storeddata;
                                                          console.log("hash "+ hash);
                                                          ipfs.files.cat(hash, function (err, stream) {
                                                           var res = '';
                                                           stream.on('data',function (chunk) {
                                                                          res += chunk.toString();
                                                            });
                                                            stream.on('error', function (err) {
                                                                          console.error('Oh nooo', err) ;   
                                                             });
                                                             stream.on('end', function () {
                                                                           console.log('Got:', res);
                                                              });

                                                               });

                                       });
                                         
                               }); 

}

How can I see the added file in frontend??

[daviddias]

Hi @mariam-crissi. What is the error you are seeing? Would you mind providing executable scripts?

Also, as a tip, it is super helpful to provide code that is easy to read (i.e that is well indented), otherwise it makes it hard for anyone else to be able to help you.

[mariam-crissi]

I have updated the code to store file as follows...

     myFunction:function(){
                var toStore = document.getElementById('fileForUpload').value;
                ipfs.files.add(new Buffer(toStore), function (err, res){
                             if(err || !res) return console.error("ipfs add error", err, res);
                            console.log(res);
                            res.forEach(function(file) {
                                            console.log(file);
                                           console.log('successfully stored', file.hash);
                           });
             });
 }

While trying to verify using IPFS it returns the error regarding fakepath

 https://ipfs.io/ipfs/QmXbBJp6xNEmCzwn8wFcD1tdh674QMjye8siisaa2nShfM

 Error is :    C:\fakepath\Untitled Diagram.jpg

[lidel]

tl;dr it is not a bug, its a feature of modern browsers

According to the specifications of HTML5, a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is C:\fakepath
- https://davidwalsh.name/fakepath

More background:

The original plan was to just have the filename. Unfortunately, it turns out that if you do that, there are certain sites that break, because they expect the path (and they expect a Windows path, no less). This is why Opera and IE8 return a fake path -- not because HTML5 says to do it. In fact I made HTML5 say it because they were doing it.

(I would expect Firefox, Safari, and Chrome to follow suit; Firefox for compatibility, and Safari and Chrome for privacy.)
- https://meta.stackexchange.com/a/68474, 2010

For most use cases, you usually want to just remove fakepath prefix, and get the file name alone:

inputNode.value = inputNode.value.replace("C:\\fakepath\\", "");

If you really need to access the original path, it should be possible via:

document.getElementById("fileForUpload").files[0].fileName;

or even:

document.getElementById("fileForUpload").files[0].name;

[daviddias]

Thank you @lidel !

@mariam-crissi let us know if you still have questions