Converting A File Uploaded To Base64 using FuctBase64

Installation

install the library fuctbase64 using

npm install fuctbase64

or

npm install fuctbase64 --save

to save to your package.json.

Usage

In Angular 2+

// Imports


import { Component } from ‘@angular/core’;

let fileUpload = require(‘fuctbase64’);

// Component Decorator

@Component({

selector: ‘app-file-upload-to-base64’,

template: `<input type=”file” name=”fileInput” (change)=”onFileChange($event)” #fileInput formControlName=”fileUpload” />

<br>

<div>

{{fileResult}}

</div>`

})

// Component Class

export class FileUploadToBase64Component {

title = ‘app works!’;

fileResult: any;

constructor(){

}

onFileChange(event){

let result = fileUpload(event);

this.fileResult = result;

}

}

In Vanilla Javascript

<input id=”the-file” name=”file” type=”file”>

<script type="tex/javascript">

let fileUpload = require(‘fuctbase64’);

var fileInput = document.getElementById(‘the-file’);

let fileResult = fileUpload(fileInput, true);

console.log(fileResult);

</script>

Multiple File Upload

<input id=”the-file” name=”file” type=”file” multiple>

<script type="tex/javascript">

let fileUpload = require(‘fuctbase64’);

var fileInput = document.getElementById(‘the-file’);

let fileResult = fileUpload(fileInput, true);

console.log(fileResult);

</script>