Cannot get/set IFormFile object from tag of View

Question

I have an upload mechanism which looks like that in the View:

 <div  method="post" enctype="multipart/form-data">
        <input type="hidden" id="ProjectId" name="ProjectId" value="@Model.ProjectId"/>
        <input type="hidden" id="Name" name="Name" value= "" />
        <input type="hidden" id="Id" name="Id" value="" />
        <div class="col-md-10">
            <div class="form-group">
                <input type="file" asp-for="InputFile"  value="test" name="inputfile" onchange="ChooseInputFileButtonChanged(this);" id="ChooseInputFile"/>
                <input type="submit" value="Upload" id="UploadInputFileButton" onclick="UploadInstallIntructions();"/>
            </div>
        </div>
    </div>

This is my uploadinstructions() method, which gets called when the user pushes the 'Upload'button.

script>
    function UploadInstallIntructions() {
        var name = document.getElementById('SoftwareVersionName').value;
        var id = document.getElementById("Id").value;
        var iFormFile = document.getElementById("ChooseInputFile").files[0];
        $.ajax({
            type: "POST",
            url: '@Url.Action("UploadInputFile", "SoftwareVersion")',
            data: { projectId: @Model.ProjectId, Name: name, Id: id, inputFile: iFormFile},
            cache: false,
            success: function (response) {
                window.location.href = response;
            }
        });
        return data;
    }
</script>

So this is a simple ajax call that calls a method on my controller with the specified arguments. My problem is that the last argument which should be the file data, of IFormFile type, so that I can work with it in my controller, doesn't get set. Is there a better way I can bind my IFormFile object in my view? Normally just the line :

input type="file" asp-for="InputFile" value="test" name="inputfile" onchange="ChooseInputFileButtonChanged(this);" id="ChooseInputFile"/>

should have worked to bind the IFormFile.

Edit: Not a duplicate of how to append whole set of model to formdata and obtain it in MVC, because my question was not about binding with FormData, but IFormFile not automattically getting created from the View.

You need t use `FormData` to post a file using ajax and set the correct ajax options. Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Jun 15 '17 at 13:07
@StephenMuecke I tried your solution and I did get a model back, but everything is null or 0 in it. The View code shown here is also in a partial view, if that helps to explain this behaviour. The UploadInstructions method is in the parent view, but that is how it would be regardless. So I still don't have the IFormFile. — Iason, Jun 15 '17 at 13:19
No, perhaps you missed something. It only worked when I added the data manually to that formData object: formData.append("SoftwareVersion.Name", name); etc — Iason, Jun 16 '17 at 06:19
I did not miss anything. Read the link I gave you! And your code is adding a property `Name: name` to the response, not `SoftwareVersion.Name: name`! And the fact you assign `name` using the value of an element which does not even exist (there is no element with `id="SoftwareVersionName" in the code) suggesst you have other problems as well, not the least being that you do not understand model binding) — , Jun 16 '17 at 06:25
Again, you missed something in your answer. I fixed that syntax error that you are pointing out since yesterday, hence why I said that it worked when I added data manually. I understand model binding, but you probably didn't understand what the issue is. — Iason, Jun 16 '17 at 07:19
Possible duplicate of [how to append whole set of model to formdata and obtain it in MVC](https://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc) — , Jun 16 '17 at 07:20
Not a duplicate beacuse my specific issue was with IFormFile automatic binding on a property — Iason, Jun 16 '17 at 07:33
It is a duplicate - you just replace `HttpPostedFileBase` with `IFormFile` in core-mvc — , Jun 16 '17 at 07:35
Nope, that didn't work, and it was the first thing I had tried to do before asking. Once again it shows you didn't clearly understand the question. — Iason, Jun 16 '17 at 07:36
Sure, that's what the problem is. I'm not gonna argue anymore anyway, — Iason, Jun 16 '17 at 07:40

Pankaj Makwana · Answer 1 · 2017-06-15T13:30:04.287

Try below code:

    <form name="UpdateInstall" id="UpdateInstall" method="post" enctype="multipart/form-data">
        <input type="hidden" id="ProjectId" name="ProjectId" value="@Model.ProjectId"/>
        <input type="hidden" id="Name" name="Name" value= "" />
        <input type="hidden" id="Id" name="Id" value="" />
        <div class="col-md-10">
            <div class="form-group">
                <input type="file" asp-for="InputFile"  value="test" name="inputfile" onchange="ChooseInputFileButtonChanged(this);" id="ChooseInputFile"/>
                <input type="submit" value="Upload" id="UploadInputFileButton" onclick="UploadInstallIntructions();"/>
            </div>
        </div>
    </form>

        <script>
            function UploadInstallIntructions() {
                var formData = new FormData($("#UpdateInstall")[0]);
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("UploadInputFile", "SoftwareVersion")',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        window.location.href = response;
                    }
                });
                return data;
            }
        </script>

score 0 · Answer 2 · answered Jun 15 '17 at 13:24

Once i have done upload a image file like this..

$('input[type="file"]').ajaxfileupload({
    'action': 'uploadFile.jsp',
    'cache': false,
    'onComplete': function(response) {
        $('#upload').hide();
        BootstrapDialog.show({
            title: 'Alert!',
            message: 'Image Upload Successfully',
            buttons: [{
                label: 'Ok',
                action: function(dialog) {
                    dialog.close();
                }
            }]
        });

        var img_src = "../profilepic/" + response;
        setTimeout(5000);
        $("#image").attr("src", img_src);
    },
    'onStart': function() {
        $('#upload').show();
    }
});

<input type="file" name="datafile" accept="image/*"/><br/>
<div id="upload" style="display:none;">Uploading..</div>

If you wish to upload files like this, visit this link for jQuery.AjaxFileUpload.js

It's just a piece of code, i have done in my case. I hope it will help you. I have used jQuery.AjaxFileUpload.js for uploading the file. — Rabinder Bisht, Jun 15 '17 at 13:26

Cannot get/set IFormFile object from tag of View

2 Answers2