DEV Community

Temidayo Ajisebutu
Temidayo Ajisebutu

Posted on

Converting A File Uploaded To Base64 using FuctBase64

fuctBase64

Converting File Uploads To Base64

Using the library.

Installation

install the library 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;
  }
}


Check out the Plunkr

In Vanilla Javascript


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

let fileUpload = require('fuctbase64');

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

let fileResult = fileUpload(fileInput, true);

console.log(fileResult);

Multiple File Upload

    <input id="the-file" name="file" type="file" multiple>
let fileUpload = require('fuctbase64');

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

let fileResult = fileUpload(fileInput, true);

console.log(fileResult);

Top comments (0)