import { Component, OnInit } from "@angular/core";
import { FileUploader, FileLikeObject } from "ng2-file-upload";
import { concat } from "rxjs";
import { FormBuilder, FormGroup } from "@angular/forms";
import { HttpClient, HttpEventType } from "@angular/common/http";

@Component({
  selector: "app-payment-requirement",
  templateUrl: "./payment-requirement.component.html",
  styleUrls: ["./payment-requirement.component.scss"]
})
export class PaymentRequirementComponent implements OnInit {
  title: string = "Formulario de requisición de pago";

  form: FormGroup;
  fileData: File = null;
  previewUrl: any = null;
  fileUploadProgress: string = null;
  uploadedFilePath: string = null;
  constructor(private http: HttpClient) {}

  ngOnInit() {}

  fileProgress(fileInput: any) {
    this.fileData = <File>fileInput.target.files[0];
    this.preview();
  }

  preview() {
    // Show preview
    var mimeType = this.fileData.type;
    if (mimeType.match(/image\/*/) == null) {
      return;
    }

    var reader = new FileReader();
    reader.readAsDataURL(this.fileData);
    reader.onload = _event => {
      this.previewUrl = reader.result;
    };
  }

  onSubmit() {
    const formData = new FormData();
    formData.append("file", this.fileData);
    this.http.post("url/to/your/api", formData).subscribe(res => {
      console.log(res);
      //this.uploadedFilePath = res.data.filePath;
      alert("SUCCESS !!");
    });
  }
}
