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
<body>
// this one to get the access to Buffer
<script src="https://bundle.run/buffer@6.0.3"></script>
Step 2. Getting Base64 of an image.
- We'll implement
image_pickeron 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
