title: Handling IPFS uploading from React FrontEnd with encryption ?
body: <p><strong>I'm novice to both StackOverFlow and IPFS too.</strong> I'm working on a Project to upload files on <strong>IPFS</strong> from the Front-End using React JS (web), For that I'm using <strong>"ipfs-api"</strong> Module provided by IPFS Community.
  Now what I want, I want to upload file with the <strong>"AES"</strong> encryption, 
  Means :- </p>
  
  <p>For Uploading to the IPFS :- 
  1. I've got the file from user
  2. converted to buffer and encrypted it using crypto(module)
  3. Converted Encrypted String to buffer to upload IPFS
  4. Got the Hash for the Encrypted file</p>
  
  <p>Now for getting original file:-
  1. Get the file from the IPFS (means got the encrypted data of the file ) using ipfs.cat method</p>
  
  <ol start="2">
  <li>Decrypted the file (using same crypto "aes-128-cbc")</li>
  </ol>
  
  <p>(gives me raw or IDK data of the file in the format, I'm getting if log that data in the</p>
  
  <pre><code>�PNG
  
  ���
  IHDR�� �� X ���Y�g���� sBIT ��O���� tEXtSoftware�gnome-screenshot� �&gt;�� �IDATx���{\�u���� �5 ���&amp;quot;( �
  </code></pre>
  
  <p>a long data</p>
  
  <ol start="3">
  <li>So please let me know what to do with that data, I think I need to save it but how to save this in a file like format of PNG or something what to do with it.</li>
  </ol>
  
  <p>Code I'm using for uploading :- </p>
  
  <pre><code> onSubmit = async event =&gt; {
      event.preventDefault();
  
      var mykey = crypto.createCipher("aes-128-cbc", "mypassword");
      var mystr = mykey.update(this.state.buffer, "utf8", "hex");
      mystr += mykey.final("hex");
  
      console.log(mystr);
  
      const buffer1 = await Buffer.from(mystr);
  
      await ipfs.add(buffer1, (err, ipfsHash) =&gt; {
        console.log(err, ipfsHash);
  
        this.setState({ ipfsHash: ipfsHash[0].hash });
      }); //await ipfs.add
    }; //onSubmit
  </code></pre>
  
  <p>Code for Getting the Data :- </p>
  
  <pre><code>  onClick = async () =&gt; {
      try {
        console.log("-----------------------------------------");
  
        ipfs.cat(this.state.ipfsHash, (err, result) =&gt; {
          console.log(err, result);
          let r = result.toString();
          let r1 = Buffer.from(r);
          let mykey1 = crypto.createDecipher("aes-128-cbc", "mypassword");
          let m = mykey1.update(r, "hex", "utf8");
          m += mykey1.final("utf8");
          console.log(typeof m);
          this.setState({ fileDat: m });
          console.log(this.state.ipfsHash);
        });
  
        console.log("-----------------------------------------");
      } catch (error) {
        //try
        console.log(error);
      } //catch
    }; //onClick
  </code></pre>
  
  <p>So please help me to get this done, in summery I need to save a encrypted file to the IPFS and save its Hash to DB and Retrieve the file using the same hash (IPFS) after decryption. </p>