angularjsasp.net-mvcng-file-upload

Ng-File-Upload to Save PDF Blob to Database


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!


Solution

  • 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();
    }