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.

Arnaf Aziz · Accepted Answer · 2019-05-09T05:08:23.083

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

can you tell how i can decode this base64 to back to file if i want — harkesh kumar, Aug 29 '18 at 05:16
If you want it in server side (ie php) please follow this https://stackoverflow.com/a/15153931/7140626 And if you want to do it using javascript follow this https://stackoverflow.com/a/38936042/7140626 — Arnaf Aziz, Aug 29 '18 at 07:03

score 2 · Answer 2 · answered Jan 11 '18 at 22:06

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.

score 2 · Answer 3 · edited Nov 04 '20 at 04:11

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 })
}

`DataURIToBlob(dataURI: string)` function works great for converting a base64 image to Blob and save it in an Amazon S3 Bucket. — Toto Briac, Jul 23 '21 at 10:34

ANGULAR 4 Base64 Upload Component

3 Answers3

Linked