How do I get the value of input file field using MVC5?

Question

I want to let the user select a file from his/her computer, and then upload it to Flickr. The point is that, when I upload a custom image from my computer, it all works fine, but when I add an extra field for the input file but program suddenly doesn't work.

Test.cshtml:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <fieldset>
        <input type="file" name="file" />
        <input type="submit" value="Upload!" />
    </fieldset>
}

HomeController.cs:

public ActionResult Upload(HttpPostedFileBase file, FormCollection form)
{
    if (Request.QueryString["oauth_verifier"] != null && Session["RequestToken"] != null)
    {
        // Flickr relevant code...
        var tmpFilePath = Server.MapPath("~/App_Data/Uploads/Pictures");

        if (file == null || file.ContentLength == 0)
        {
            return RedirectToAction("Index"); // It keeps hitting this!
        }

        var filename = Path.GetFileName(file.FileName);
        var path = Path.Combine(tmpFilePath, filename);

        if (System.IO.File.Exists(path))
        {
            System.IO.File.Delete(path);
        }

        file.SaveAs(path);

        string photoId = flickr.UploadPicture(path, "Test picture");

        if (String.IsNullOrEmpty(photoId))
        {
            System.Diagnostics.Debug.WriteLine("Upload failed!");
        }

        System.IO.File.Delete(path);
    }
    else
    {
        // Flickr relevant code...
    }

    return View("Test");
}

As long as I know, because MVC is a server-side framework, first of all I need to upload the picture to my server, and then upload it to Flickr. The point is that, I want to put the file in my App_Data/Upload/Pictures folder, and then upload it to Flickr, and afterwards delete it from there. So, I want to keep my server clean.

UPDATE: It keeps hitting the return RedirectToAction("Index"); part, and redirects.

the `input` must have the `name` attribute same as the `HttpPostedFileBase` param. (in your example is missing) http://stackoverflow.com/questions/15680629/mvc-4-razor-file-upload/15680783#15680783 — Cristi Pufu, Jul 28 '14 at 15:31
@CristiPufu I specified the name also as file. Check the code above. But it still doesn't seem to work. — , Jul 28 '14 at 17:06

score 0 · Accepted Answer · answered Jul 28 '14 at 15:56

0

You're missing enctype="multipart/form-data" from you form tag. Without that, file data is not uploaded to the server when the form is submitted.

Change your form call to:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

answered Jul 28 '14 at 15:56

Chris Pratt

232,153
36
385
444

In what way? Did you heed the advice of @CristiPufu in the comments under you question. Assuming you've done that, this should have got you the rest of the way there. – Chris Pratt Jul 28 '14 at 17:08
I updated my code, and as you can see I added both the part you said, and the part @CristiPufu said. But still now luck. It keeps hitting the redirect action. – Jul 28 '14 at 17:12
it's possible it's getting caught up in the `FormCollection` instead of specific being bound to the `file` parameter. The model binder isn't always great at putting things in the right parameters if you give it multiple valid choices to pick from. I would suggest using a view model to properly bind your form with, so everything is strongly-typed and Razor handles all the naming of fields (If Razor generates it, there's usually no problem getting the model binder to handle it properly). – Chris Pratt Jul 28 '14 at 17:19
Actually there is no model in my program. Just the default AccountViewModel and IdentityModel. I don't want to create a database or something with the uploaded files. I just want them to put in server, upload to Flickr and afterwards delete them. Also, I haven't put [HttpPost] attribute in Upload function, because if I put it I get 404 error. Without it, works good when I specify the file path from my PC, but if I put a file input, I cannot make it work. – Jul 28 '14 at 17:26
I said *view model*. No database table is required. It's just a class that allows you to keep all this form data in an organized structure instead of as keys in a dynamic collection. See: http://www.edandersen.com/2013/05/28/asp-net-mvc-basics-part-1-view-model-binding/ – Chris Pratt Jul 28 '14 at 17:37
Okay, I guess I misunderstood you earlier. Can you give me a code example? Also please note that, when I chose a file from the computer, and press the button, if redirects to Flickr to authorize the app, and then it should upload, but unfortunately that's when it redirects me to my Index page. – Jul 28 '14 at 17:38

How do I get the value of input file field using MVC5?

1 Answers1