如何将数据或警报消息从服务传递回组件

Question

I am using Angular 6 and I have the upload file control on 3 different screens ( 3 different component), all of them calling the same method UploadFile() but issue is whenever i have to make any changes to this method, I have to update this method in all 3 places. So, I thought to create a service (non-shared) with this method UploadFile() so that I have to make changes at one place and to be called by all 3 screens. I have a challenge that how to return the alert messages and how to return both success, failure response from the another service inside this service back to the components.

@Injectable({
  providedIn: 'root'
})

export class MyFileUploader {

  fileuploadList: EventUpload[];
  eventId: Number;
  constructor(private dateFormatHelper: DateFormatHelper, private manageService: ManageService) {
  }

public UploadFile(event) {
     const fileList: FileList = event.target.files;
     if (fileList.length > 0) {
         const file: File = fileList[0];
         const extension = fileList[0].name.split('.').pop();

        if (this.fileuploadList.find( f => f.fileName === file.name)) {
           alert('Duplicate file identified!');
           return;
        }
         const formData: FormData = new FormData();
         const params = Object.assign({}, {
              Id: 0,
             F ileName: file.name,
              FilePath: 'XXXXXX', 

         });
         formData.append('uploadFile', file, params.FileName);
         formData.append('data', JSON.stringify(params));
         this.manageService.uploadAttachments(formData).subscribe (resp => {
           if (resp === -1 ) {
             alert('Error occured while uploading the attachment');
             return;
            } else {
              this.fileuploadList.push (new DataUpload (0, params.FileName, 
           params.CreatedBy,));
             }
         },
       (error) => {
         console.log('POST ERROR in method uploadAttachments: ' + error.error);
       }
       );
     }
 }
}

Answer 1

Your UploadFile method can return a Subject. Something like this:

public UploadFile(event) {
 const uploadSubject: Subject<any> = new Subject();
 const fileList: FileList = event.target.files;

Import like this:

import { Subject } from 'rxjs';

And use it like this:

    if (this.fileuploadList.find( f => f.fileName === file.name)) {
       alert('Duplicate file identified!');
       uploadSubject.next('Duplicate');
       uploadSubject.complete();
    }

On the caller side:

this.myFileUploaderService.UploadFile(event)
 .subscribe(
   (response) => console.log(response), 
   (error) => console.error(error),
   () => console.log('completed')
)

Every time you call UploadFile method you can subscribe to the Subject to receive informations from the Service.