2

I need to send a file with some caption/title.

My formData is shown empty after I append.

I don't know whether append is happening or not. I tried to iterate formdata but it shows nothing.

My HTML code:

<form (ngSubmit)="onSubmit()" [formGroup]="myForm1">

    <ion-label required class="label">Title
        <span>
            <b style="color:red">*</b>
        </span>
    </ion-label>
    <ion-textarea class="options" formControlName="title">
    </ion-textarea>

    <ion-label required class="label">File
        <span>
            <b style="color:red">*</b>
        </span>
    </ion-label>
    <input type="file" name="file" (change)="select($event)" formControlName="file">

    <button ion-button type="submit">Submit</button>

</form>

My ts file:

select(event) {
  this.fileList = null;
  this.fileList = event.target.files;
  let file = event.target.files[0];
  console.log(event.target.files[0]);
  console.log(event.target.files);
  this.form.append("title", this.myForm1.value.title);
  console.log(this.myForm1.value.title);
  console.log(this.form.get("title"));
  console.log(this.form);
  this.form.append("file", file);

  Object.entries(this.form).forEach(
    ([key, value]) => console.log(key, value),
    console.log("1")
  );

  for (var pair of Object.entries(this.form).entries()) {
    console.log("&&&&");
    console.log(pair[0] + ', ' + pair[1]);
  }
  console.log(this.form.get("file"));
  console.log(Object.entries(this.form));
  console.log(Object.values(this.form));
}

onSubmit() {

  this.ddocument.filePostData(this.form, this.uid).then((result) => {
    this.data = result;
    console.log(this.data);
    this.aler(this.data.message);
  }, (err) => {
    this.aler(err);
  });
}

My server posting code is:

filePostData(data, uid) {
  console.log(data);
  return new Promise((resolve, reject) => {
    let headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');

    this.http.post(this.url.getCreateDocumentUrl() + uid, (data),

      { headers: headers })

      .subscribe(res => {
        resolve(res.json());
        console.log(res);
      }, (err) => {
        reject(err);
      });
  });
}

I tried all possible ways but it won't work. Can any help me with this? Thanks in advance.

anothernode
  • 5,100
  • 13
  • 43
  • 62

0 Answers0