title: Angular - How to make a File Upload Service?
body: <p>I find useful to use a service to upload images, however i'm unable to recover <code>url</code> value that is setted after <code>render.onload</code>. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// service
  export class UploadService {
  
    constructor(private alertService: AlertService) {}
  
    uploadPhoto(event: Event) {
        const file = (event.target as HTMLInputElement).files[0];
  
        if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg') {
            const reader = new FileReader();
            let url;
            reader.onload = () =&gt; {
                url = reader.result;
            };
            reader.onerror = (error: any) =&gt; {
                this.alertService.error(`Error ao carregar a imagem: ${error}`);
                return;
            };
            reader.readAsDataURL(file);
            return { File: file, Url: url };
        } else {
            this.alertService.error('Formato inválido. Somente imagens do formato Png, Jpeg e Jpg são permitidos.');
            return;
        }
    }
  }
  
  // component
  uploadBanner(event: Event) {
    const Upload = this.uploadService.uploadPhoto(event);
    if (Upload) {
      this.urlBanner = Upload.Url;
      this.shop.banner = Upload.File;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I recover <code>url</code> and <code>file</code>?</p>