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
– Rory McCrossan, Commented Mar 19, 2020 at 13:02
Is it possible for you to provide a bit more explanation to this? — Jeppe Christensen
– Jeppe Christensen, Commented Mar 19, 2020 at 15:49
Sure, here's how to do it with a plain form (which you have now). Here is how to do it with jQuery AJAX — Rory McCrossan
– Rory McCrossan, Commented Mar 19, 2020 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
– Jeppe Christensen, Commented Mar 19, 2020 at 16:01

Ryan · Accepted Answer · 2020-03-20 06:15:45Z

0

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
        }       

    }

answered Mar 20, 2020 at 6:15

Ryan

20.3k10 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeppe Christensen Over a year ago

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

Ryan Over a year ago

@Jeppe Christensen Refer to stackoverflow.com/questions/36432028/…. Or you could use any other method which converts IFormFile to byte[].

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related