如何从 Angular NGX Dropzone 中的图像中提取 base64

Question

Hey guys I am using NGX Dropzone and I notice when I drag an image into the viewer it is in base64, but when I try to read the console.log(event.addedFiles); I have no information being passed to me with the base64 value. Here's an example of what I get back

[File]
  0: File
     lastModified: 1625149167659
     lastModifiedDate: Thu Jul 01 2021 10:19:27 GMT-0400 (Eastern Daylight Time) {}
     name: "210534431_764639924207804_238792847075232344_n.jpeg"
     size: 101133
     type: "image/jpeg"
     webkitRelativePath: ""
     __proto__: File
     length: 1
     __proto__: Array(0)

I have another piece of code which I have been using that transforms a URL into a base64 string. But thats useless to me since the URL can also be shared and opened by anyone from anywhere. However my local image in my computer is only available to me, unless I transform it into base64 which is a string I can save in a database.

This is the script

imageToShow: any;

onURLinserted() {
  this.getImage(this.thumb.name).subscribe(data => {
    this.createImageFromBlob(data);     
  }, error => {
    console.log("Error occured",error);
  });

  console.log("Data: ", this.thumb.name);
}

getImage(imageUrl: string): Observable<Blob> {
  return this.http
    .get<Blob>(imageUrl, { observe: 'body', responseType: 'blob' as 'json' })
}

createImageFromBlob(image: Blob) {
  let reader = new FileReader(); //you need file reader for read blob data to base64 image data.
  reader.addEventListener("load", () => {
      this.imageToShow = reader.result; // here is the result you got from reader which I use to view the image
      this.selectedRowData.photo = reader.result; // this is my ngModel read by my HTML input fields
  }, false);

  if (image) {
    reader.readAsDataURL(image);
  }
}

//In my HTML code
<img [src]="imageToShow" alt=""> 

All I am really trying to do is extract the base64 information from the image dragged in there into imageToShow either by using this code if it helps or something similar OR maybe the cdk drag an drop already has a prop that I dont know about

How do I know that the base64 is even available? When I drag an image in it, and I inspect it in the dev tool I can see the src="data:image/jpeg;base64,random stuff..."

Wish I could put some test code here but I will need the dropzone library for it

Answer 1

Looks like ngx-dropzone does not have a prop that provides bas64String. You can use readAsDataURL to get base64String. The readAsDataURL is used to read the contents of the Blob or File. When the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.

The below code worked for me.

html file

    <div class="custom-dropzone" ngx-dropzone [accept]="'image/jpeg,image/jpg,image/png,image/gif'"
                  (change)="onSelect($event)">
                  <ngx-dropzone-label>
                    <div>
                      <h2>Upload photo</h2>
                    </div>
                  </ngx-dropzone-label>
                  <ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f"
                    [removable]="true" (removed)="onRemove(f)">
                  </ngx-dropzone-image-preview>
   </div>

.ts file

onSelect(event) {
        this.files.push(...event.addedFiles);
        if (this.files && this.files[0]) {
          for (let i = 0; i < this.files.length; i++) {
           this.fileToBase64(this.files[i])
            .then(result=>{
              const base64String = result.replace('data:', '')
              .replace(/^.+,/, ''); // To remove data url part
              this.postMultimedias.push({ name:this.files[i].name,content: 
               base64String});//postMultimedias is a array which holds image name and bas64String
            });         
          }
        }
      }

 fileToBase64 = (file:File):Promise<string> => {
    return new Promise<string> ((resolve,reject)=> {
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => resolve(reader.result.toString());
         reader.onerror = error => reject(error);
     })
    }

onRemove(event) {
    let position = this.files.indexOf(event);
    this.postMultimedias.splice(position, 1);
    this.files.splice(position, 1);
  }