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
• 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

• 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

// 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.

  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.

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