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](https://hivefreedomdollar.sagarkothari88.one/) - [HiveCurators - DiscordBot](https://peakd.com/@hivecurators) - [Video Encoder Nodes](https://github.com/spknetwork/video-encoder) - [The Hive Mobile App](https://the-hive-mobile.app/) - [3Speak Mobile App](https://github.com/spknetwork/Android-app) - [3Speak new-website - backend (acela-core)](https://github.com/spknetwork/acela-core) - [3Speak new-website](https://github.com/spknetwork/3speak-nextjs) - [Hive Witness Node](https://hivesigner.com/sign/account-witness-vote?witness=sagarkothari88&approve=1)  ### Updates: [HiveFreedomDollar](https://hivefreedomdollar.sagarkothari88.one/) - [Day before yesterday](https://ecency.com/hive-139531/@sagarkothari88/2024-04-13-how-to), 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 ```swimlane 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 ```javascript 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 ```javascript 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 ```javascript 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](https://peakd.com/@hivecurators) - 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](https://github.com/spknetwork/video-encoder) - 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](https://hivesigner.com/sign/account-witness-vote?witness=sagarkothari88&approve=1) [](https://hivesigner.com/sign/account-witness-vote?witness=sagarkothari88&approve=1)