In Asp.Net Core, how can I get the multipart/form-data from the body?

Question

In Asp.Net Core, it appears that they have done away with the Request.Content.ReadAsMultipartAsync functionality in favor of the IFormFile.

This makes uploading where you have an actual file a LOT easier, however, I have a use case where I need to upload a file to browser memory, process it, then send it as part of the multi-form data in the body. IFormFile cannot see this as there is no actual file to read. It only works if you have a filename property on the Content-Disposition and an actual file on the client to upload.

In my Asp.Net 4 app, I could read the mutlipart data in the body whether that was sent between boundaries or as an attached file.

How do I accomplish this in .Net Core?

Answer 1

What I figured out is that the multipart values are passed into the HttpRequest.Form as an array of key/value pairs. The "name" value on the body's multipart determines the name of the key.

I created a helper method that grabs both files and form values.

public static List<FileModel> GetFileModelsFromRequest(HttpRequest request)
{
    var fileModels = new FileModels();

    foreach (var formField in request.Form)
    {
        // Form data 
        var fileModelText = formField.Value;

        ... process and add to the FileModel list
    }

    if (request.Form.Files != null && request.Form.Files.Count > 0)
    {
        foreach (var file in request.Form.Files)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                // File data
                formFile.CopyTo(ms);                    
            }

            ... process and add to the FileModel list
        }
    }

    return fileModels;
}

Answer 2

I have done it this way. when I had to capture image from webcam and process (show that image in browser) it in browser memory and later on post that image using a form.

public IActionResult Index()
{
    var files = HttpContext.Request.Form.Files;

    if (files != null)
    {
        foreach (var file in files)
        {
            var fileName = file.Name;
        }
    }

    return View();
}

I used a JS library Webcam.js to capture image from webcam and show that image on the same page. and once a user is satisfied with the image, s/he can upload the image to the server.

<!-- Configure settings and attach camera -->  
<script language="JavaScript">  
    Webcam.set({  
        width: 320,  
        height: 240,  
        image_format: 'jpeg',  
        jpeg_quality: 90  
    });  
    Webcam.attach('#camera');  
</script>  
<!-- handle snapshot and displaying it locally -->  
<script language="JavaScript">  
    function take_snapshot() {  
        // take snapshot and get image data  
        Webcam.snap(function (data_uri) {  
            // display results in page  
            document.getElementById('imageResults').innerHTML =  
                '<img src="' +  
                data_uri +  
                '"/>';  

            Webcam.upload(data_uri,  
                '/Default/Index',  
                function (code, text) {  
                    console.log('Photo Captured');  
                });    
        });  
    }  
</script> 

<div class="panel panel-default">  
        <div class="panel-heading">Camera</div>  
        <div class="panel-body">  
            <div id="camera"></div>  
            <!-- A button for taking snaps -->  
            <form>  
                <input type="button" class="btn btn-success" value="Take Snapshot" onClick="take_snapshot()">  
            </form>  



 <div class="panel panel-default">  
        <div class="panel-heading">Captured Image</div>  
        <div class="panel-body">  
            <div id="imageResults">captured image will appear here...</div>  
        </div>  
        <br />  
        <br />  
    </div>  

let me know if this is what you are looking for.