How to convert blob to base64 on React Native - android

I'm developing an application that runs both web and mobile app (React Native).
In the mobile app, I have to fetch a file from S3 Bucket and convert it to base64 in order to show and write it to mobile storage.
When fetching a file that has a small size, I just fetch a file from S3 without responseType.
But when I fetch a large file, I don't get any data from API and the mobile app is stunned (it keeps loading and I cannot get any response from API). So I have to pass responseType: 'blob' to get data from API.
My question is: How to convert or read Blob to base64 while React Native cannot use FileReader like a web application?
Thanks in advance!

Oh I try using FileReader to read Blob and it work! I thought FileReader is not working in React Native

Related

Displaying images on running website on android mobile application

I have a running website where i have images of products uploaded in a directory and the respective
images name in mysql database. Now, i have my mobile application (android) connected to my running website
database through an API that does the communication.
Technology used for my application development
1. Android Studio (IDE)
2. Retrofit for communication with the Slim
3. Slim for the API
4. Mysql for storage
ISSUES
Product upload is only allowed on the website.
How can i have access to the product images in the image folder of my running website to be displayed
on my android app through the API. Am only having access to the image name which was stored in the
database after product upload on my website.
Am i to have the whole image content uploaded in database using BLOB when uploading product on my
running website.
Please, kindly assist me in resolving this.
THANK YOU.
You don't want to store an image in the database as BLOB, now you are getting the file name using the API and you know the file stores server path, then you can achieve those images like this.
Here am using picasso image library to set your images to ImageView in android , you can use different tricks to set image.
String filename = "yourProductImageName.png" //this is the filename you get from api
String filepath = "https://yourDomin.com/imagesdirectory/" + filename;
Picasso.get().load(filepath).into(imageView);

Download generated Blob with Ionic 3 into Android Device

I have encounter this issue recently while using Ionic3 to develop app on Android phone. I have cols and rows of data which I extracted into a 2D array. After which, I create a csv blob from the 2D array using papaparse.
let csv = papa.unparse({
fields: this.headerRow,
data: this.csvData
});
var blob = new Blob([csv]);
var a = window.document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "confidentialData.csv";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
The code above works only for browser download, when I load it into my android phone, it does not download at all. I have read many other posts on how Ionic app download file into the device using FileTransfer and File. But I cant seem to work around with these because FileTransfer.download requires a url source in order to download the file into the device.
But for my case, the file is not hosted anywhere and the blob is generated dynamically from my code. Would appreciate any help or recommendation on how I can download my csv blob into my android device using Ionic 3. Thank you very much.
You are getting it wrong. FileTransfer works as an upload or download from an url (For example uploading a picture to a server from your device or downloading a picture from the server to your device).
What you want to look at is Cordova File and use the functions createFile and writeFile to save the data on the device.
EDIT: To save your file on the Documents or Downloads folder you will need to use cordova.file.externalRootDirectory + '/Download/' for it to work, also take in mind that a lot of folders are just read only (dataDirectory on iOS for example)
Hope this works.

Cordova Android display Base64 encoded PDF in browser

What would be the simplest way to render a PDF document whose Base64 encoding is returned from a web service on an Android app built using cordova?
Can this be done without additional plugins?
Any sample code would be useful.

React Native: Upload Picture from local path to Firebase storage

I'd simply like to upload an image from a local path on my mobile device to Firebase Storage. I get this image using a module called ImagePicker and it provides me with a path that is formatted like this:
"file:///storage/emulated/0/Android/data/com.explr/files/Pictures/image-468dccf5-35a0-42cc-9910-1f8ba83c9bf8.jpg"
I've read on a post that this wasn't possible due to differences between react for the web and react for mobile, but that post was from 2016.
So did anything change? Is it possible now?
Thanks for helping!

Uploading image to a database

I'm trying to develop an android app which displays the images stored in a database hosted on a server . As of now , i'm using Firebase , which supports only text and i'm storing the url of the image to be displayed in my app .
Are there any other options for me to store images on the internet and retrieve them in my App ?
You can encode the images themselves using Base64 and storing them directly. But what you are doing is usually the best option.
To learn how to encode images to Base64, see here:
https://stackoverflow.com/a/9224180/5935255

Categories

Resources