2024-04-14 - How to upload an image to Hive Post on Flutter Anroid/iOS App?

 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/) - [Yesterday](https://ecency.com/hive-139531/@sagarkothari88/2024-04-13-how-to), I talked about how upload an image from Flutter-webapp - Today, I'm going talk about How to add an image to Hive Post on a Flutter Android/ iOS App. - Note, this post is a part solution. I'll publish another part when it's working, most probably tomorrow.  ## Adding an image on Hive Post - https://developers.hive.io/services/imageHoster.html - Here the piece of code for uploading the image when you have the PostingKey. - I found some related code but not exact code to match my need - upload image with @HiveKeychain, @hiveauth - In this article, I'll illustrate how to upload an image even with plain javascript inside html page. ## Objective: Use Flutter as front-end & Upload an image using HTML & vanilla JS - We'll have a web-view on the native app side. - Using this web-view we'll be able to execute javascript of our choice. - Flutter can talk to native-apps & native apps can execute these javascript. - With this, we don't have to re-invent the wheel & create libraries in dart/flutter. - With this approach, we utilise already developed javascript libraries & make the max out of it. - In today's post, I'll talk about the javascript code which we'll be adding - In next post, I'll talk about how to execute javascript functions from Flutter. - Reference #1: https://gitlab.syncad.com/hive/condenser/-/blob/develop/src/app/redux/UserSaga.js#L861 - Reference #2: https://developers.hive.io/services/imageHoster.html ### Step 1: Getting the Buffer ``` // this one to get the access to Buffer ``` ### Step 2. Getting Base64 of an image.  - We'll implement `image_picker` on the Flutter side. - Flutter side code will generate base64 of selected image. - Flutter side code will supply base64, file name to javascript side. ### Step 3: Processing based on file name - based on file name supplied, we'll define the upload type. ```javascript function _getFileTypeFromExtension(fileName) { let extension = fileName.split(".").pop().toLowerCase(); switch (extension) { case "jpg": case "jpeg": return "image/jpeg"; case "png": return "image/png"; case "gif": return "image/gif"; default: return "image/jpeg"; } } ``` ### Step 4. Creating File from Binary - Following code snippet will generate a file from given binary & file path. - It uses above defined function as well. ```javascript function _createFileFromBinaryString(binaryString, filePath) { let fileName = filePath.substring(filePath.lastIndexOf("/") + 1); let fileType = _getFileTypeFromExtension(fileName); let byteArray = new Uint8Array(binaryString.length); for (let i = 0; i < binaryString.length; i++) { byteArray[i] = binaryString.charCodeAt(i); } let blob = new Blob([byteArray], { type: fileType }); let file = new File([blob], fileName, { type: fileType }); return file; } ``` ### Step 5. Base64 to Binary & Binary to Buffer - We'll call following function from flutter side. - In this, we'll be supplying base64 encoded image - This base64 encoded image will be converted to file (binary) - From that binary, we'll generate buffer - This buffer, we'll use to create signature - And created file, we'll use to upload it on Hive ```javascript async function uploadImage(id, accountName, binary, filePath) { const binaryString = atob(binary); var file = _createFileFromBinaryString(binaryString, filePath); const content = window.buffer.Buffer.from(binaryString, "binary"); const prefix = window.buffer.Buffer.from("ImageSigningChallenge"); const buf = window.buffer.Buffer.concat([prefix, content]); // need to work on now getting the buffer signed from HiveKeychain/HiveAuth using HAS. } ``` ### That's it? - NO NO. Not yet. Let's wait for next post. - In next post, I'll connect the dots & add a short demo video to show it working. - I'm not the HTML or Javascript Guy. - I like iOS App Development - Swift & I like Flutter. - For me, it really took good amount of time to not only figure it out but to put pieces together to make it work. - So, take a moment of appreciation, please don't forget to upvote the content or [vote me as Hive Witness](https://hivesigner.com/sign/account-witness-vote?witness=sagarkothari88&approve=1)  ### 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 39 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 - Those who reply to curation comments, they will be randomly rewarded with Alive token. - To these users, @usagidee, @marilour, @sacra97, @kemmyb, @nainaztengra, @mysteriousroad, @jmis101, @blanca56, @damelysh, @ekads, @lesmann, @mbracho, @medussart, 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 (13-Apr-2024) 3Speak published total 150 videos - My video encoder nodes encoded 121 videos from 150 videos published.    ### How is @sagarKothari88 doing? - I'm doing good today. Son is also feeling little better. - He didn't sleep at all whole night yesterday & half of the Sunday, we spent by taking enough rest. - We watched all pending episodes of Young Sheldon. - I tried watching remaining episode of FallOut but it's little difficult for me 😥. I'll try to watch this may be later. - Overall, looking forward for coming week. - Excited to contribute even more for #Hive in next week.  ### 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 | | -- | -- | -- | | @juancar347 | @juancar347/eng-spn-a-lost-hermitage-in-the-bureba-una-ermita-perdida-en-la-bureba | 40 % | | @amitsharma | @amitsharma/chandeliers-cane-lampshades-lamps-beautiful-decorative-ideas-to-illuminate-spaces | 22 % | | @rtonline | @rtonline/battle-mage-secrets-weekly-challenge-five-alive-ruleset-splinterlands | 36 % | | @abenad | @abenad/1000-hp-in-three-months-im-emotional | 20 % | | @edittasc86 | @edittasc86/esp-eng-sincronias-oror-iniciativa-el-regalo-de-coincidir | 20 % | | @eumelysm | @eumelysm/the-best-coincidences-of-my-life-initiative-programming-for-wellness-esp-ing | 20 % | | @osomar357 | @osomar357/iniciativa-personalidades-fuertes-seres-empaticos | 20 % | | @antoniarhuiz | @antoniarhuiz/esp-eng-sincronia-de-la-vida-coincidencias-oror-iniciativa-el-regalo-de-coincidir | 22 % | | @vickoly | @vickoly/reflections-on-side-hustles-triumphs-and-trials-in-pursuit-of-financial-freedom | 27 % | | @emmaris | @emmaris/estrategia-para-trabajar-las-emociones-con-los-ninos-en-casa-esp-eng | 20 % | | @xykorlz | @xykorlz/fantastic-five-alive-challenge | 21 % | | @netflixr | @netflixr/lost-in-translation-film-an-entertaining-look-into-loneliness-and-love | 34 % | | @alonicus | @alonicus/13-april-2024-mariannewests-freewrite-writing-prompt-day-2341-consumers-of-blood-critical-mass | 27 % | | @fernanblog | @fernanblog/hnqhwsss | 22 % | | @shiftrox | @shiftrox/enptbr-monthly-holiday-have-you-thought-the-dream-of-family-day | 27 % | | @soyunasantacruz | @soyunasantacruz/tasting-vegetarian-food-in-good-company-degustando-comida-vegetariana-en-buena-compaa | 25 % | | @sunisa | @sunisa/i-don-t-know-what | 21 % | | @sugarelys | @sugarelys/retomando-clases-de-danza-arabe-luego-de-4-anos-esp-eng | 26 % | | @ayijufridar | @ayijufridar/the-beautiful-princesses-of-the-lake-guard-monomad-or | 20 % | | @rqr4 | @rqr4/sand-storm-s-combat-ability | 21 % | | @curatorcat | @curatorcat/caturday-finally-enjoying-a-day-warm-enough-to-open-the-windows | 22 % | | @nbarrios67 | @nbarrios67/creative-sunday-rapture-arrebatamiento-english-spanish- | 21 % | | @qwerrie | @qwerrie/2024-first-spring-cats-arrived | 40 % | | @guurry123 | @guurry123/social-media-transforming-lives-and-businesses | 24 % | | @vsc.network | @vsc.network/vsc-block-explorer-ui-updates-1h-2024 | 100 % | | @sanjeevm | @sanjeevm/vrindavan-shri-banke-bihariji-temple-keshi-ghat-and-nidhivan | 40 % | | @iptrucs | @iptrucs/milly-la-foret-the-village-of-jean-cocteau-part-1 | 20 % | | @entraide.rewards | @entraide.rewards/ecu-s-distribution-14th-april | 20 % | | @ak08 | @ak08/how-about-some-weapons-training-my-friend | 22 % | | @reeta0119 | @reeta0119/tv-shows-that-i-watch-everyday | 40 % | | @jane1289 | @jane1289/tung-chung-bay-in-black | 29 % | | @george-dee | @george-dee/minimalism-beyond-physical-space | 22 % | | @intishar | @intishar/for-a-better-lifestyle- | 23 % | | @palomap3 | @palomap3/mi-diario-14-abril-2024 | 27 % | | @aera8 | @aera8/come-enjoy-kolang-kaling-compote | 20 % | | @avdesing | @avdesing/in-wood-painted-and-carved | 24 % | | @belkyscabrera | @belkyscabrera/monument-to-the-joropo-in | 24 % |  ### 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) </div> </div>