0

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.

Adam Schneider
  • 275
  • 1
  • 5
  • 18
  • 2
    You are saying `this.file = event.target.files[0];` but then you are sending `this.uploadForm.get('profile').setValue(file);`. Should you be saying `setValue(this.file)` instead? – Pace Aug 28 '19 at 17:41
  • Pace, I can't seem to find the kiss button on Stackoverflow, I am gonna make a feature request. – Adam Schneider Aug 28 '19 at 17:57

0 Answers0