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?
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: ALL HAIL PACE FOR NOTICING I FORGOT this.file
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];
// ERROR WAS HERE! thank you PACE, all hail PACE!
this.uploadForm.get('profile').setValue(this.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://www.c-sharpcorner.com/article/how-to-convert-a-byte-array-to-a-string/
Save and load MemoryStream to/from a file
any and all help is appreciated, thank you.