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.

Author	Post	Weight
@yogeshbhatt	@yogeshbhatt/today-was-the-3rd-day	20 %
@miingjazz	@miingjazz/another-one-of-my-experiences	21 %
@faniaviera	@faniaviera/decepciones-amorosas-amorous-deceptions	20 %
@mad-runner	@mad-runner/battle-mage-secrets-weekly-challenge-0e863defefc2c	24 %
@luca1777	@luca1777/big-lake-wannsee-in-the-southwest-of-berlin	24 %
@adelepazani	@adelepazani/the-hot-heat-of-the-sun-by-the-south-sea-is-wonderful-happy-hours-with-the-southern-boy	24 %
@neilamarcano	@neilamarcano/aayykdmf	20 %
@romeskie	@romeskie/pranks	26 %
@melinda010100	@melinda010100/brown-pelicans	40 %
@carisma77	@carisma77/exquisite-salty-cheese-cake-exquisito	20 %
@michupa	@michupa/japanese-food-night-enpt	29 %
@crazyphantombr	@crazyphantombr/en-pt-fast-furious-and	23 %
@pirulito.zoado	@pirulito.zoado/battle-mage-secrets-engpt-br-splinterlands-ruleset-five-alive	21 %
@hive-world	@hive-world/my-first-encounter-night-with	20 %
@maydelvalle	@maydelvalle/un-domingo-sin-color	20 %
@mercmarg	@mercmarg/14-april-2024-mariannewests-freewrite-writing-prompt-day-2342-bathtub-of-tears-engesp	20 %
@builderofcastles	@builderofcastles/the-grand-unified-theory-has-been-elusive-because-modern-molecular-science-is-wrong	24 %
@brujita18	@brujita18/mom-proud-of-emanuel-en	21 %
@kingsleyy	@kingsleyy/if-dreams-are-real	21 %
@yetsimar	@yetsimar/ruben-se-roba-las-camaras	22 %
@schumix05	@schumix05/battle-mage-secrets-challenge-five-alive-deeng	21 %
@takhar	@takhar/productivity-and-creativity	20 %
@libertycrypto27	@libertycrypto27/its-time-to-assemble-my-new-desktop-pc-step-one-choosing-components-to-purchase-engita	40 %
@mcookies	@mcookies/clasical-music-week-201	20 %
@crisch23	@crisch23/weekend-to-eat-ice-cream-with-the-family	24 %
@andyjaypowell	@andyjaypowell/trip-to-wurzburg	40 %
@sperosamuel15	@sperosamuel15/cleanliness-should-be-our-culture	20 %
@vaynard86	@vaynard86/battle-mage-secrets-five-alive-keeping-it-simple	25 %
@genming	@genming/battle-mage-secrets-weekly-challenge-five-alive-ruleset	20 %
@eliaschess333	@eliaschess333/no-solo-es-suficiente-con-manipular-velocidad-la-magia-me-sorprende-en-un-five-alive-battle-mage-secrets	21 %
@arbalestarx7	@arbalestarx7/battle-mage-secrets-weekly-challenge-a7e68bf8006af	20 %
@javivisan	@javivisan/battle-mage-secrets-weekly-challenge-five-alive-en-es	23 %
@hadrianwild	@hadrianwild/not-entirely-peaceful-dove-smap	21 %
@janitzearratia	@janitzearratia/pretending-that-everything-is-fine	20 %
@jhymi	@jhymi/test-chase	22 %
@suteru	@suteru/opening-10-elite-draws	21 %
@g2ml	@g2ml/blusa-con-mangas-largas-fruncidas-con-elastico-blouse-with-long-sleeves-gathered-with-elastic-esp-eng	20 %
@mnurhiver	@mnurhiver/two-interesting-types-of-insects	25 %
@aries12	@aries12/macrophotography-wildflowers-d94c70dad9995	20 %
@florenceboens	@florenceboens/nos-petits-repas-de-debut-avril-2024	21 %
@wiseagent	@wiseagent/lpud-the-fourth-of-the-year	40 %
@dewabrata	@dewabrata/the-five-alive-think-it-as-ordinary	25 %
@idea-make-rich	@idea-make-rich/indian-s-sweet-dish-name	22 %
@pinkchic	@pinkchic/discovering-the-amazing-mountain-ranges-of-impasugong	26 %
@gadrian	@gadrian/my-hive-goals-week-15-2024	22 %
@plantfuljourney	@plantfuljourney/floral-harmony-in-the-garden	20 %
@lincemarrom	@lincemarrom/five-alive-battle-mage-secrets-enptbr	20 %
@codingdefined	@codingdefined/april-lpud-and-my-goal-status	40 %
@emrysjobber	@emrysjobber/s-s-s-s-s-8998d0cceeea3	20 %

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