Send used file @Ajax.Beginform and Xmlhttprequest

Question

I have the following doubt:

I’m doing a post with @Ajax.BeginForm, but the same does not send file, so I wanted to use the File Api, my idea was this

I would do the post for @Ajax.BeginForm thus:

     @using (Ajax.BeginForm("Cadastrar", "Item", new AjaxOptions { HttpMethod = "Post",OnSuccess = "onSuccess"}, new { Id = "formItem" }))
{
  <div class="box-body" id="boxNovoProduto">
                    @Html.AntiForgeryToken()
                    @Html.HiddenFor(model => model.Tipo)
                    <div class="form-group">
                        @Html.LabelFor(model => model.Titulo)
                        @Html.TextBoxFor(model => model.Titulo, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.Titulo, "", new { @class = "text-danger", required = "required" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.LinkVenda)
                        @Html.TextBoxFor(model => model.LinkVenda, new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.Descricao)
                        @Html.TextBoxFor(model => model.Descricao, new { @class = "form-control textarea textarea-fixed", })
                        @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger", required = "required" })
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <legend><i class="fa fa-image"></i> Selecione imagens</legend>
                            <input id="inputImagens" accept="image/*" name="input44[]" type="file" multiple class="file-loading">
                            <div id="blocoErroImagem" class="help-block"></div>
                        </div>
                    </div><br />

                    @if (Model.VideoAtivo)
                    {
                        <div class="row">
                            <div class="col-xs-12">
                                <legend><i class="fa fa-file-video-o"></i> Adicione um vídeo</legend>
                                <input id="inputVideos" accept="video/*" name="input44[]" type="file" multiple class="file-loading">
                                <div id="blocoErroVideo" class="help-block"></div>
                            </div>
                        </div><br />
                    }
                </div>
                <div class="box-footer" style="margin-top: 10PX;text-align: center">
                    <button type="submit" id="btnSubmit" class="btn btn-primary btn-lg  pull-right">Publicar</button>
                </div>
            }
}

And then, in Submit I would send the file to the same method ,something like this :

 document.getElementById('formItem').onsubmit = function (e) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/Unidade/Item/Cadastrar');
        xhr.send(formdata);
        return false;
    }

In the controller I get the following: Public Actionresult Register(Productproductredmodel Productredmodel)

And my intention is to receive the file as follows:

Request.Files[i]

But in giving xhr.send(formdata); I’m in error 500,and the Request.Files always this empty, I don’t know if I could do that, and if that’s not possible accept suggestions.

If you could explain a little about the operation I would be eternally grateful.

I tried sending it to another controller on onsuccess I called a function called sendFile, it works but I didn’t think it was very cool, if anyone has any idea how to do it.