Ng-File-Upload to Save PDF Blob to Database

Question

I'm editing this post to show my latest attempt per suggestions below. I have been searching the forums trying to find a solution. I have an ASP.NET MVC Application in which I use Angular. I am trying to use danialfarid/ng-file-upload to allow users to upload PDFs which then get saved to the database as binary data (not my idea, but I have to do it that way).

I have the following (taken from the examples) in my HTML:

File:<input type="file" ngf-select ng-model="picFile" name="file" accept="image/*" ngf-max-size="2MB" required ngf-model-invalid="errorFile"><br />
<img  ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button><br />
<button type="button" class="btn btn-primary" ng-click="uploadPic(picFile)">Upload</button>

And this in my Angular controller:

$scope.uploadPic = function (files) {
    file.upload = Upload.upload({
        url: '/SSQV4/SSQV5/Document/UploadEMRDocument',
        data: {file: files}
    })
}

My MVC Controller:

namespace SSQV5.Controllers
{
    public class DocumentController : ApiController
    {

        public async Task<IHttpActionResult> UploadEMRDocument()
        {
            try
            {
                var provider = new MultipartMemoryStreamProvider();
                await Request.Content.ReadAsMultipartAsync(provider);

                var f = provider.Contents.First(); // assumes that the file is the only data

                if (f != null)
                {
                    var filename = f.Headers.ContentDisposition.FileName.Trim('\"');
                    filename = Path.GetFileName(filename);
                    var buffer = await f.ReadAsByteArrayAsync();

                    //buffer now contains the file content,
                    //and filename has the original filename that was uploaded

                    //do some processing with it (e.g. save to database)
                }
                else
                {
                    return BadRequest("Attachment failed to upload");
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
            return Ok();
        }
    }
}

This code never hits the MVC Controller at all. I'm obviously missing something, but I haven't the slightest clue as to what it could be. Any assistance is greatly appreciated!

Answer 1

You need to extract the file content out of the form data.

Below is how I do this (using ng-file-upload in the same manner as you from the front end) to upload attachments in my application.

public async Task<IHttpActionResult> UploadAttachment()
{
    // Check if the request contains multipart/form-data.

    try
    {
        var provider = new MultipartMemoryStreamProvider();
        await Request.Content.ReadAsMultipartAsync(provider);

        var f = provider.Contents.First(); // assumes that the file is the only data

        if (f != null)
        {
            var filename = f.Headers.ContentDisposition.FileName.Trim('\"');
            filename = Path.GetFileName(filename);
            var buffer = await f.ReadAsByteArrayAsync();

            //buffer now contains the file content,
            //and filename has the original filename that was uploaded

            //do some processing with it (e.g. save to database)
        }
        else
        {
            return BadRequest("Attachment failed to upload");
        }
    }
    catch (Exception ex)
    {
        return BadRequest(ex.Message);
    }

    return Ok();
}

Answer 2

When you configure the upload, you specify the URL where the file will be posted to:

file.upload = Upload.upload({
    url: 'myMVC/MyMethod',
    data: {file: file}
})