wcf service call to upload image from angular

Question

I am trying to upload an image through wcf from angular frontend. It is working fine and I am receiving a success message too but the image saved is not opening in image viewer of any other image program.

the code to save the received file stream is copied from stackoverflow previous answer but that answer was very old.

 public string PostImage(Stream stream)
            {
                using (var f = new FileStream(@"C:\Temp\Sample.jpg", FileMode.OpenOrCreate))
            {
                stream.CopyTo(f);
            }
            stream.Close();
            return "Recieved the image on server";
            }
}

How can I save the file in correct format.

Angular files are

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  fileData: File = null;
constructor(private http: HttpClient) { }

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

onSubmit() {
    console.log('Test');
    const formData = new FormData();
    formData.append('file', this.fileData);
    this.http.post('http://localhost:50604/Service1.svc/PostImage', formData, {responseType: 'text'})
      .subscribe(res => {
        console.log(res);
        alert('SUCCESS !!');
      });
}
}

It appears that this service is saving only 139kb file and stream is breaking. The webconfig binding settings are as follows

<webHttpBinding>
        <binding name="largeMessage" maxReceivedMessageSize="1000000000000" transferMode="Streamed" maxBufferPoolSize="2147483647" maxBufferSize="2147483647" closeTimeout="00:03:00" openTimeout="00:03:00" receiveTimeout="00:10:00" sendTimeout="00:03:00">
          <readerQuotas maxStringContentLength="2147483647" maxArrayLength="1000000000" maxBytesPerRead="2147483647" />
          <security mode="None"/>
        </binding>
      </webHttpBinding>

Answer 1

The code is only copying the first 10,000 bytes of your input stream to C:\Temp\Sample.jpg. You might have more success with the following:

public string PostImage(Stream stream)
{
    using (var f = new FileStream(@"C:\Temp\Sample.jpg", FileMode.OpenOrCreate))
    {
        stream.CopyTo(f);
    }
    stream.Close();
    return "Recieved the image on server";
}

Answer 2

It may be that our image was not saved successfully, such as the file stream is not completely copied.
We had better upload the image/stream by using Asynchronous programming model. Please refer to my service interface definition and implementation.
IService.cs

   [OperationContract]
    [WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json,BodyStyle =WebMessageBodyStyle.Wrapped)]
    Task UploadStream(Stream stream);

Service1.svc.cs

public async Task UploadStream(Stream stream)
{
    using (stream)
    {
        //save the image under the Uploads folder on the server-side(root directory).
        using (var file = File.Create(Path.Combine(HostingEnvironment.MapPath("~/Uploads"), Guid.NewGuid().ToString() + ".jpg")))
        {
            await stream.CopyToAsync(file);
        }
    }
}

Feel free to let me know if the problem still exists.

Updated.
Form Data is not supported by WCF built-in function. We should parse the stream to the practical file content.
Reading file input from a multipart/form-data POST
Please refer to my example (MultipartParser class is completed by others)
Service1.svc.cs

public async Task UploadStream(Stream stream)
{
    MultipartParser parser = new MultipartParser(stream);
    if (parser.Success)
    {
        using (var file = File.Create(Path.Combine(HostingEnvironment.MapPath("~/Uploads"), Guid.NewGuid().ToString() + ".png")))
        {
            await file.WriteAsync(parser.FileContents, 0, parser.FileContents.Length);
        }
    }
}

For CORS issue. Please add Global.aspx file to the WCF project.

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With,Accept");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}

Html.

<div class="form-group">
  <label for="file">Choose File</label>
  <input type="file"
         id="file"
         (change)="handleFileInput($event.target.files)">
   <input type="submit" id="mybutton" value="Upload" (click)="onSubmit();">      
</div>

App.component.ts

export class AppComponent {
  title = 'MyAngular20190808';
  fileToUpload: File = null;
  constructor(private http: HttpClient) {
  }
  handleFileInput(file: FileList) {
    this.fileToUpload=file.item(0);
  }

  onSubmit() {
    console.log('test');
    const formData = new FormData();
    formData.append('filekey', this.fileToUpload,this.fileToUpload.name);
    this.http.post('http://10.157.18.36:8800/service1.svc/UploadStream', formData, {responseType: 'text' })
      .subscribe(res => {
        console.log(res);

      })
  }
}

Feel free to let me know if there is anything I can help with.

Updated.