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

sagarkothari88(77)

Published in

HiveDevs

Words

680

Reading

4 min

Listen

Play

Hello Hive Community Members,

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

Actively contributing to following projects on Hive

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.

swimlane diagram

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.

sagars encoded videos

total encoded videos

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 %