How to base64 encode a file in NativeScript

plugins
ios
nativescriptcore

#1

i am a newbi and my English is not good. I want to convert a file to base64 then i upload it to the server. I have done like instruction on Base64 encode audio file for the web but the endcoding is not true and i can’t open the file. please tell me about your solution. thank you!


#2

Are you encoding audio files or images?

To encode an image, first import enums:

const enums = require("ui/enums");

then convert the image:

const imageAsBase64 = image.toBase64String(enums.ImageFormat.png);


#3

i want endcode all type of files: png, jpg, pdf, txt …


#4

I don’t think there is a built-in api to encode any file into Base64 string but basically it will be just a line of code. As your original question talks about audio files, here I have a demo that downloads a random mp3 file from internet and encodes it into base64 format then play same in WebView to verify it is encoded properly.


#5

i not only want endcode audio files but also encode pdf, doc, txt …


#6

The code should be same for encoding any file

const base64String = android.util.Base64.encodeToString(file.readSync(), 
android.util.Base64.NO_WRAP);

#7

thank you for your solution


#8

is there anyway to make this work on IOS ?


#9

NativeScript let you access any native api, so writing iOS version should not be a big deal.


#10

i will appreciate it if you could give me an example, i am kinda new to nativescript


#11

For iOS is should be file.readSync().base64EncodedStringWithOptions(0), find update Playground example below.


#12

@manojdcoder Sorry, I wanted to use this like this =>

let android;
          const base64String = android.util.Base64.encodeToString(data.file.readSync(),
            android.util.Base64.NO_WRAP);
          console.log("b64 "+ base64String)

but getting util is not defined, do I need to require util or how?


#13

Update: Sorry I meant to say you should not declare android as variable with block scope, remove it.


#14

This is what I have in my script tag =>

<script>
	import * as camera from "nativescript-camera";
  import {
    Image
  } from "ui/image";
  import {
    TNSFancyAlert,
    TNSFancyAlertButton
  } from 'nativescript-fancyalert';
  let android;
  export default {
    data() {
      return {
        picture: "~/images/vid_plc.png",
        show: 'collapsed',
        ...........
      }
    },
    methods: {
      onTakeVideo: async function() {
        try {
          const vr = require('nativescript-videorecorder');
          const options = {
            saveToGallery: false,
            duration: 30,
            format: 'mp4',
            size: 10,
            hd: false,
            explanation: 'Video recorder'
          }
          const videorecorder = new vr.VideoRecorder(options);
          const data = await videorecorder.record();
          console.log("This is the video file " + data.file);
          const base64String = android.util.Base64.encodeToString(data.file.readSync(),
            android.util.Base64.NO_WRAP);
          console.log("b64 " + base64String);
        } catch (err) {
          console.log(err)
        }
  
      },
    }
  }

</script>

#15

So I shouldn’t declare it at all?


#16

Yes, it will be available at run time for Android. You just have to make sure you don’t run that set of code in iOS.


#17

okay another thing is can I specify the path of the file? cos thats what I did here =>

data.file.readSync()

where data.file contains => /storage/emulated/0/Android/data/org.nativescript.application/files/VID_1531991144810.mp4
and I’m getting data.file.readSync() is not a function


#18

Please refer the plugin docs, the file returned here is a string not a actual file object. You have to create file from string again, refer file system module in official docs to learn more.


#19

got it woking now.:relieved:


#20

Guys… NativeScript has a built in library that abstracts all of this. See the Image Source section here: https://docs.nativescript.org/ui/ns-ui-widgets/image