хотите отправить файл и еще одно текстовое поле (переключатель) при загрузке файла с помощью angular 6 - PullRequest
Новая
       38

хотите отправить файл и еще одно текстовое поле (переключатель) при загрузке файла с помощью angular 6

0 голосов
/ 04 октября 2018

Мой HTML-код: 

<form name="form" (ngSubmit)="f.form.valid && fileSubmit()" #f="ngForm">

        <div class="upload_file_type" *ngFor="let name of table_names">
          <input type="radio" name="table_name" value="{{ name }}" [(ngModel)]="model.file_name"  #file_name="ngModel"
          (change)="radioChange($event)">
          <span>{{ name }}</span>
        </div>

        <div id="demo" class="show upload-sec">                           
          <div class="upload-btn " title="upload file">
            <input type="file" name="file" (change)="onFileChanged($event)"  class="chose-file upload_file_icon" >
            <i class="fas fa-cloud-upload-alt files"></i> 
          </div> 
        </div>

        <button class="btn btn-primary btn_logger btn-block">Submit</button>
 </form>

Мой код TS : 

 onFileChanged(event) {
    this.file = event.target.files[0]
    this.model['file']= this.file }

  fileSubmit(){
    this.loader_service.fileUpload(this.model).subscribe((response)=>{
   },
   err => {
     this.errors = err['error'];
     this.uploadStatus ="Upload Failed"
   });
 }

Мой сервис :

fileUpload(data){

  const formData: FormData = new FormData();
  formData.append('file', data, data.name); 
  return this.httpClient.post('api/data_loader/file/', formData);}

Ожидаемый вывод :

Я хочу отправить json Пример: {"file_name": "xyz", "file": "xyz.csv"}

Здесь имя_файла - это поле радиокнопки, а файл - это поле для загружаемого файла.

...