Passing data from cshtml view to database when clicking submit. ASP.NET MVC 5

Question

I want to store the path of a file, in the database, that is uploaded by some user. I am not sure how to accomplish this correctly as the way I am attempting to do it now involves the file name being captured within a method from the controller and then being passed to the view via TempData[];

The cshtml variables look like this:

    var fileName = TempData["FileName"];
    var filePath = String.Format("{0:MM-yyyy}/", DateTime.Now);
    var filepath = filePath + fileName;

Where "fileName" has the captured file name passed from the controller and "filePath" with an uppercase P is the current month and year that I then concatenate with "fileName" in "filepath" with a lowercase P.

Then using an html helper like this:

    @Html.TextBoxFor(model => model.FileLnQ, new { @Value = filepath})

... to store the path in the database.

There are two problems:

One, this helper shows the file path I want to store in a text box which is what this helper is designed for, but I would like to use a helper that just sends the data to the database.

Two, since the method that grabs the file name is called after submit is selected, "filepath" is still just the month and year, the complete string with the current_month_and_year/FileName needs to be sent but I don't know how this would be done. Naturally I am using the following to select the file to be uploaded:

   <input type="file" id="fileToUpload" name="file" />

Using this current method I have to submit the file twice before the correct file path is stored, and has the side effect of showing the file path that I am storing in the database.

I'm sure there must be a simpler way of accomplishing this using an htlm helper that I am not aware of.

Answer 1

This took a little while to get my head around so after moving on to other aspects of the project I finally came back to it and solved it. As I suspected there is in-fact a helper that solved part of this for me. So instead of using this (C#):

<div id ="fileName" class="editor-field">
    @Html.TextBoxFor(model => model.FileLnQ, new { @Value = filepath})
</div>

Which displays a text field.

I used this (VB):

<div id ="fileName" class="editor-field">
    @Html.HiddenFor(Function(Model) Model.FileLnQ)
</div>

Which hides the text field. This solved problem 1 in the question I posed. Notice that I am no longer pre-loading data into this html helper as it is no longer needed and was only for testing purposes anyways.

To solve the second part of my problem was that I abandoned the idea of passing data from the controller to the view using (C#):

var fileName = TempData["FileName"];

Since, as I wrote in my original question, this was only passing data on the submit button selection. Instead using some java inside a jQuery function:

$(document).ready(function () {
// "File Select Button" change event
    $('#fileToUpload').change(function () { // <input> id on change event
        var filename = $('input[type=file]').val().split('\\').pop();  // get the file name and parse to remove "C:\fakepath\" from the string.
        $("#fileName > input").val(filename); // store "filename" into <div> id "fileName"
    });
});

Was all I needed to pull the file name I needed from the file select input tag:

<input type="file" id="fileToUpload" name="file" />

Which was my main problem.

Hope this helps someone who might come across something similar.