jQuery read byte[] from type="file" input box on submit

Question

I have a custom input field, in which I want to upload a file.

<form class="submitform">
    <div class="input-group">
            <input type="file" class="custom-file-input" id="fileInput"
                   aria-describedby="fileInput" />
            <label class="custom-file-label" for="fileInput">Choose file</label>
    </div>
    <div class="modal-footer row">
        <button type="submit" class="btn btn-primary" id="submitAddFile">Submit</button>
        </div>
    </div>
</form>

Once, the submit button in my form is pressed, I want to fetch respectively the filename and the byte[]. This I try to do in the following way through jQuery:

$('#submitAddFile').click(function () {
    var file = $('#fileInput')[0].files;
    debugger;
}

And then I sort of didn't get any further.. From what I can read through debug, I'm not getting any byte[] that I can pull out and send to my controller. I am however able to get things, such as file size and file name.

Therefore, how do i correctly extract the byte[] so that I can store it in my database

You're over complicating this. Just send the file to the server (either by submitting the form or AJAX) and your ASP.Net action will handle the file's binary data for you, you just need to save it somewhere. — Rory McCrossan, Mar 19 '20 at 13:02
Is it possible for you to provide a bit more explanation to this? — Jeppe Christensen, Mar 19 '20 at 15:49
Sure, [here's](https://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx/) how to do it with a plain form (which you have now). [Here](https://stackoverflow.com/a/37762290/519413) is how to do it with jQuery AJAX — Rory McCrossan, Mar 19 '20 at 15:51
But does this work in .net Core? the `Request.File` method is not available here. I tried to do the exact same, and i'm still not hitting my controller. — Jeppe Christensen, Mar 19 '20 at 16:01
That would be useful information for the question. In any regard a simple Google gives this guide: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-3.1 — Rory McCrossan, Mar 19 '20 at 16:03

score 0 · Accepted Answer · answered Mar 20 '20 at 06:15

You could use form submit or use ajax to post the form and use IFormFile on action to receive your file.In the action, then you could get file name or convert file to byte[].

The name of action parameter is required to match the name of form data.

For example:

Js:

<script>
    $('#submitAddFile').click(function (e) {
        e.preventDefault();
        var file = $('#fileInput')[0].files;
        var formData = new FormData();
        formData.append("myFile", file[0]);


        $.ajax({
            type: "POST",
            url: "/Home/UploadFile",
            contentType: false,
            processData: false,
            data: formData,
            success: function (result) {
                alert("success");
            },
            error: function () {
                alert("there was an error");
            }
        });
    })
</script>

HomeController:

[HttpPost]
public void UploadFile(IFormFile myFile)
    {
        var fileName = Path.GetFileName(myFile.FileName);
        using (var ms = new MemoryStream())
        {
            myFile.CopyTo(ms);
            byte[] fileBytes = ms.ToArray();

            //save fileName and fileBytes into database
        }       

    }

Thank you! can you please let me know, why you would use the MemoryStream? In which cases is this necessary? I can see it works without — Jeppe Christensen, Mar 20 '20 at 10:13
@Jeppe Christensen Refer to https://stackoverflow.com/questions/36432028/how-to-convert-a-file-into-byte-array-in-memory. Or you could use any other method which converts IFormFile to byte[]. — Ryan, Mar 23 '20 at 01:38

jQuery read byte[] from type="file" input box on submit

1 Answers1