Accept a POSTED file

Question

I am trying to upload a PDF using Angular 8. I am successfully getting the file the user selects on the front end. I am passing something off to the back-end but when I am attempt to read the file from the memory stream, during my test in converting it to a string I get "[object FileList]" instead of the contents of the file.

Is this something with swagger I am not familiar with? I think I might be stuck more than I was before.

Below is my HTML for the selection of the file.

    <div>
        <form [formGroup] = "uploadForm" (ngSubmit)="onSubmit()">      
      <div>
        <!-- TODO: rename profile -->
        <input type="file" name="profile" (change)="onFileSelect($event)" 
    accept=".pdf"/>
      </div>
      <div>
        <button type="submit">Upload</button>
      </div>
    </form>
  </div>

Below is my TypeScript:

    import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'app-pdf',
  templateUrl: './pdf.component.html',
  styleUrls: ['./pdf.component.css']
})
export class PDFComponent implements OnInit {

  SERVER_URL = "http://localhost:64528/api/uploadPDF";
  uploadForm: FormGroup; 
  file;

  constructor(private formBuilder: FormBuilder, private httpClient: HttpClient) { }

  ngOnInit() {
    this.uploadForm = this.formBuilder.group({
      profile:['']
    });
  }

  onFileSelect(event){
    var file = event.target.files;
    if(file.length > 0){
       this.file = event.target.files[0];
      this.uploadForm.get('profile').setValue(file);

      var confirm = this.uploadForm.get('profile').value;
    }
  }

  onSubmit(){
    const formData = new FormData();
    formData.append('file', this.uploadForm.get('profile').value);

    this.httpClient.post<any>(this.SERVER_URL, formData).subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );
  }

}

and Below is my C#

using HeadcountTrackingAPI.Repositories;
using HeadcountTrackingAPI.Utilities;
using Swashbuckle.Swagger.Annotations;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;

namespace HeadcountTrackingAPI.Controllers
{
    public class PDFController : ApiController
    {
        // GET api/<controller>
        [SwaggerOperation("uploadPDF")]
        [HttpPost]
        [Route("api/uploadPDF")]
        public async Task<IHttpActionResult> UploadFile()
        {
            try
            {
                if (!Request.Content.IsMimeMultipartContent("form-data"))
                    throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

                // Initialize the memorty stream provider
                MultipartMemoryStreamProvider memoryStream = new MultipartMemoryStreamProvider();

                // Assign it's contents
                memoryStream = await Request.Content.ReadAsMultipartAsync();

                // Read the contents asynchronosly 
                using (System.IO.Stream pdfStream = await memoryStream.Contents.First().ReadAsStreamAsync())
                {

                    byte[] bytes = new byte[pdfStream.Length];

                    // streamBytes to the byte array starting a position 0 and ending at the end of the file
                    pdfStream.Read(bytes, 0, (int)pdfStream.Length);

                    var byteString = BitConverter.ToString(bytes);
                    string utfString = System.Text.Encoding.UTF8.GetString(bytes, 0, bytes.Length);
                }

                    return Ok(new { Posted = true });
            }
            catch (Exception ex)
            {
                ex.LogException();
                return InternalServerError(ex);
            }
        }
    }
}

Below is the Resources I have accessed https://learn.microsoft.com/en-us/previous-versions/aspnet/dn202095(v%3Dvs.118)

'multipart/form-data' is not supported for this resource

https://www.c-sharpcorner.com/UploadFile/2b481f/uploading-a-file-in-Asp-Net-web-api/

Send a file via HTTP POST with C#

How To Accept a File POST

any and all help is appreciated, thank you.

Answer 1

Try this:

[HttpPost]
[Route("api/uploadPDF")]
public async Task<IHttpActionResult> UploadFile()
{
    try
    {
        if (!Request.Content.IsMimeMultipartContent("form-data"))
        {
            return StatusCode(HttpStatusCode.UnsupportedMediaType);
        }

        var fileProvider = await Request.Content.ReadAsMultipartAsync();

        var pdfStream = await fileProvider.Contents.First().ReadAsStreamAsync();

        //do something with the pdf stream

        return Ok(new { Posted = true });                
    }
    catch (Exception ex)
    {
        ex.LogException();
        return InternalServerError(ex);
    }
}