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

sagarkothari88(77)

Published in

HiveDevs

Words

900

Reading

4 min

Listen

Play

Post Thumb

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

Yesterday, 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

<body>
// this one to get the access to Buffer
<script  src="https://bundle.run/[email protected]"></script>

Step 2. Getting Base64 of an image.

Post Thumb

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.

  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.

  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

  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

Updates: HiveCurators - DiscordBot

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

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 %