CODEWITHSUNDEEP
angularform-data
Jack G
Jack G

Reputation: 95

angular form data won't append

I am trying to upload files with angular 6. However, I can't seem to append my formData(). Alittle help. Thank you.

home.component.ts

export class HomeComponent implements OnInit {
  selectedFile: File = null;
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _postService: PostService
) { }

ngOnInit() {}


onFileChanged(event) {
this.selectedFile = event.target.files[0]}

postImage() {
const uploadData = new FormData();
uploadData.append('myFile', this.selectedFile, this.selectedFile.name);
console.log(uploadData)
this._postService.postImage(uploadData)}}

home.component.html

<input style="display: none" type="file (change)="onFileChanged($event)" #fileInput>
<button (click)="fileInput.click()">Select File</button>
<button (click)="postImage()">Upload!</button>

Upvotes: 8

Views: 19844

Answers (1)

Akj
Akj

Reputation: 7231

Try something like this:

DEMO

The file is already appended in formdata but You can not directly inspect form data :

onFileChanged(event) {

    let formData = new FormData();
    this.selectedFiles = event.target.files;
    this.currentFileUpload = this.selectedFiles.item(0);


    console.log(this.currentFileUpload)
    formData.append('file', this.currentFileUpload);

    formData.append('labelName', 'test');
    formData.append('formPart', 'test');
    console.log(JSON.stringify(formData))

   formData.forEach((value,key) => {
      console.log(key+" "+value)
    });
  }

Upvotes: 13

Related Questions