2024-04-15 - Image upload with HiveAuth On Flutter WebApp

Hello Hive Community Members,

Welcome to daily updates from @sagarkothari88 - a Hive Witness & mobile-app-developer.

Actively contributing to following projects on Hive

• HiveFreedomDollar
• HiveCurators - DiscordBot
• Video Encoder Nodes
• The Hive Mobile App
• 3Speak Mobile App
• 3Speak new-website - backend (acela-core)
• 3Speak new-website
• Hive Witness Node

Updates: HiveFreedomDollar

• Day before yesterday, I talked about how upload an image from Flutter-webapp with @keychain
• With @keychain, it was very easy. One javascript function does it all.
• However, with @hiveauth, it's not that straight forward.
• In this post, I'll illustrate the steps I've taken to upload the image.
• Please correct me if I'm wrong somewhere.

Background before diving into the code

• Flutter Web App has the Socket connection of @hiveauth.
• Only Javascript side of code has crypto utilities. I've tried crypto on dart side but results aren't matching. I'll utilise javascript as much as possible.
• Only Javascript side of code has proper buffer processing. I've tried dart buffers & have failed. I've also tried AI's suggestion which didn't work. After wasting good amount of time, I decided to utilise javascript side of Buffer feature.

Pseudocode for image upload using hiveauth on flutter webapp

FlutterApp -> JavaScript: OpenImagePicker

note:
- FlutterApp informs JavaScript to open image picker.
- WebApp code - It opens up an image picker.
- User selects file.
- After file is selected, we get buffer of it.
- We get base64 of selected file.
- We prepare buffer to sign
- Buffer to sign - is converted to JSON & JSON to Base64

JavaScript -> FlutterApp: Buffer2SignBase64, FileBase64, file name

note:
- FlutterApp receives Buffer to sign as base64.
- FlutterApp decodes base64 of buffer to sign & obtains JSON
- FlutterApp preserves these 3 values.

FlutterApp -> HiveAuth: Sign Buffer

note:
- FlutterApp sends this data to HiveAuth with a signing challenge request
- In Signing Challenge request, we attach Json of buffer to sign & request to sign with Posting key.

HiveAuth -> FlutterApp: Signed Buffer

note:
- FlutterApp receives signature of buffer to be signed.

FlutterApp -> JavaScript: Signature, Base64 of Image, File Name

note:
- FlutterApp sends signature, base64 of image & file name to JavaScript side of code.
- JavaScript side of code prepares a proper form-data-request after creating file-blob object from given base64.
- JavaScript side of code uploads image

JavaScript -> FlutterApp: Uploaded URL

note:
- JavaScript side of code returns the URL of uploaded image.
- FlutterApp now can use this URL as an attachment in the post.

Async function to get Buffer of a File

async function getFileBuffer(file) {
  return new Promise(function (resolve, reject) {
    var reader = new FileReader();
    reader.onload = async () => {
      const content = window.buffer.Buffer.from(reader.result, "binary");
      resolve(content);
    };
    reader.readAsBinaryString(file);
  });
}

Async function to get Base64 of a File

async function getFileBase64(file) {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
  });
}

Getting Data to Sign for HiveAuth after image is selected

async function openImagePickerForWebAppForHiveAuth(id, accountName) {
  return new Promise(function (resolve, reject) {
    var input = document.createElement("input");
    input.type = "file";
    input.onchange = (e) => {
      var file = e.target.files[0];
      getFileBuffer(file).then((content) => {
        getFileBase64(file).then((base64) => {
          const prefix = window.buffer.Buffer.from(
            "ImageSigningChallenge"
          );
          const buf = window.buffer.Buffer.concat([prefix, content]);
          // we are converting it to base64 
          // to avoid double-json-encoding-decoding failures.
          const bufJsonBase64 = btoa(JSON.stringify(buf));
          let retResp = JSON.stringify({
            id: id,
            valid: true,
            accountName: accountName,
            data: {
              bufJsonBase64: bufJsonBase64,
              base64: base64,
              fileName: file.name,
            },
          });
          resolve(retResp);
        });
      });
    };
    input.click();
  });
}

• So, From the given swimlane diagram, I was able to only complete step 1 & step 2.
• I am yet working on Step 3 - get buffer signed by @HiveAuth
• As soon as I'm done with everything, I'll update this post.

Updates: HiveCurators - DiscordBot

• HiveCurators - DiscordBot is doing well
• No outages were reported
• HiveCurators With DiscordBot was able to successfully curate approximately 49 posts today.
• Curation report is added below in the post
• I've staked ALIVE.
• Those who read my post & reply, I'll reward them with Alive & Pizza tokens.
• Those who reply to curation comments, they will be randomly rewarded with Alive token & Pizza tokens.
• To these users, @himalayanwomb, @thebigsweed, @irvet, @jlufer, @saranegi, I sent 0.05 Hive Power - to reward them for their contribution on Hive Communities.
• Here is the screenshot, from Ecency Wallet, indicating the same.

Updates: Video Encoder Nodes

• I'm running 12 powerful video encoder nodes for 3Speak Community Members.
• Monthly internet bandwidth usage which exceeds 15 TB, Maintenance cost, Electricity backup, Internet backup, Depreciation cost - it's all on me.
• Yesterday (14-Apr-2024) 3Speak published total 139 videos
• My video encoder nodes encoded 110 videos from 139 videos published.

How is @sagarKothari88 doing?

• Today, I went to out to find new pre-schools for my son.
• I find this school decent & nearby.
• I asked as much as possible & found satisfactory answers.
• But I insisted on trying out the school for a month & to convince them about this idea, I suggested to give us options for summer camp.
• Except that, Today, most of my time spent in solving @hiveuath related challenges in current project.

Curation Report

NOTE: If you don't like tagging you under curation report, let me know in comment section & I'll exclude you from the curation report.

What do you think?

• What do you guys think?
• Am I heading in right direction? Am I doing good for Hive?
• Do you have some tips to share? If yes, add it in comment section.

Who am I?

• I'm a Hive Witness
• 3Speak App Developer
• I've also contributed to mobile-app for HiveAuth
• I also work on HiveFreedomDollar App
• I worked with Team @ecency for integrating 3speak-video-upload feature
• Founder of HiveCurators Community - @hive-185924 / @hivecurators
• Founder of https://the-hive-mobile.app/#/

Support me

• Please upvote my content to motivate me
• Please Reblog
• Please vote me as Hive Witness

Vote me as Hive Witness