ANGULAR 4 Base64 Upload Component

Question

I am new to Angular. I am using Angular 4. Where there is a requirement to send the base64 Image as one of the model member to the web api. Is there a Angular component or directive for the that would bind the base64 to the said model?

Appreciate and Thank you for the help.

Answer 1

You can upload image and store it as base64 encoded.

In your template add this

<div class="image-upload">
    <img [src]="imageSrc" style="max-width:300px;max-height:300px"/>
    <input name="imageUrl" type="file" accept="image/*" (change)="handleInputChange($event)" />
</div> 

And this will handle your upload mechanism from component

  private imageSrc: string = '';

  handleInputChange(e) {
    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }
  _handleReaderLoaded(e) {
    let reader = e.target;
    this.imageSrc = reader.result;
    console.log(this.imageSrc)
  }

You can also use this code to make a component to upload an image

Answer 2

To answer your exact question...

Is there a Angular component or directive for the that would bind the base64 to the said model?

No. It's out of scope of Angular. You can use common ways of encoding data into base64.

You can then create a control value accessor that would take care of conversion, to keep your code more DRY.

Answer 3

imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your image base64 data url

onSubmit(){
    const file = this.DataURIToBlob(this.imgBase64)
    const formData = new FormData();
    formData.append('upload', file, 'image.jpg')
    formData.append('profile_id', this.profile_id) //other param
    formData.append('path', 'temp/') //other param

    this.dataService.setProfileImage(formData). //send formData in body
}

DataURIToBlob(dataURI: string) {
    const splitDataURI = dataURI.split(',')
    const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
    const mimeString = splitDataURI[0].split(':')[1].split(';')[0]
        
    const ia = new Uint8Array(byteString.length)
    for (let i = 0; i < byteString.length; i++)
        ia[i] = byteString.charCodeAt(i)
      
        return new Blob([ia], { type: mimeString })
}