Http post a file data

Question

I have two <input> tag on my client to choose a file. Once the client choose the files (24-bit BMP 640*480), I have to make a http.post so that I could save the imageData of each file and make a http.get when I need it. I tried posting an ImageData object or just an Uint8ClampedArray but I was getting some errors. Now I tried to convert it to base64 and send it but I'm still not getting anything.

This is my http.post:

public submitInfo(): void {
  this.http.post("http://localhost:3000/sologame", { "name": this.game.gameName, "image1": this.game.picture }, HTTP_OPTIONS).pipe(
    catchError(this.handleError("submitInfo"))).subscribe();
}

This is the error I'm getting now that I'm trying to send a base64 string:

How can I send the data of my image?

Answer 1

There is two way to do it:

1. Send binary data

---

onUpload(selectedFile: File) {
    this.http.post('api/file-upload', selectedFile).subscribe(...);
}

2. Send as FormData

---

onUpload(selectedFile: File) {
    const uploadData = new FormData();
    uploadData.append('file', selectedFile, selectedFile.name);
    this.http.post('api/file-upload', uploadData).subscribe(...);
}