Injecting a field from a component into a service

Question

I have an html input and corresponding component that holds a file as a field:

html:

<input id="templateUpload" type="file" (change)="detectFiles($event)" class="upload-input">

Ccmponent:

export class RfqTemplateManagerComponent {

  selectedFiles: FileList;
  currentUpload: File;

  constructor(){
  }

  detectFiles(event) {
    this.selectedFiles = event.target.files;
  }

  uploadTemplate() {
    const file = this.selectedFiles.item(0);
    this.currentUpload = file;
   }
 }

Is there a way to take my currentUpload field and inject it into a service that's supposed to validate and manipulate the file so that I don't have to upload it again?

Answer 1

You can just simply pass File to service without any further problems.

export class RfqTemplateManagerComponent {

  selectedFiles: FileList;
  currentUpload: File;

  constructor(
    private MyService: MyService
  ) { }

  detectFiles(event) {
    this.selectedFiles = event.target.files;
  }

  uploadTemplate() {
    const file = this.selectedFiles.item(0);
    this.currentUpload = file;
    this.MyService.currentUpload = this.currentUpload;
    this.MyService.validateFile();
   }
 }

Answer 2

For your use-case, the best way would be to inject the service into your component and call the service method which validates the file. You can pass currentUpload as a parameter to the service method.

myService: MyService
constructor(myService: MyService) {
  this.myService = myService;
}


uploadTemplate() {
  const file = this.selectedFiles.item(0);
  this.currentUpload = file;
  this.myService.validate(this.currentUpload);
}