doneit-web/src/app/services/functions/file.service.ts

import { Injectable } from '@angular/core';
import { FileLoaderService } from '../file/file-loader.service';
import { FileToBase64Service } from '../file/file-to-base64.service';

@Injectable({
  providedIn: 'root'
})
export class FileService {

  capturedImage:any;
  capturedImageTitle:any;

  constructor(
    private fileLoaderService: FileLoaderService,
    private fileToBase64Service: FileToBase64Service,
  ) { }

  loadPicture() {
    const input = this.fileLoaderService.createInput({
      accept: ['image/apng', 'image/jpeg', 'image/png']
    })

    input.onchange = async () => {
      const file = this.fileLoaderService.getFirstFile(input)

      console.log(file);

      const imageData =  await this.fileToBase64Service.convert(file)
      this.capturedImage = imageData;
      this.capturedImageTitle = file.name;

      let data = {
        image:this.capturedImage,
        name: this.capturedImageTitle
      }

      return data;
    };
  }
}