31

I need some help. I'm trying to upload files using <input type="file">. Here is my View:

@using (Html.BeginForm("BookAdd", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="files[0]" id="files[0]" />
    <input type="file" name="files[1]" id="files[1]" />
    <input type="submit" value="Upload Book" />
}

And here is an Action which should process uploaded file.

[HttpPost]
public ActionResult BookAdd(IEnumerable<HttpPostedFileBase> files)
{
    // some actions
    return View();
}

The problem is that "files" always contains two elements which are null. What can be done to fix it?

It's time for some news. It seems like I found the problem, but I still don't know how to fix it. It appears that despite the fact I'm using "multipart/form-data" here:

@using (Html.BeginForm("BookAdd", "Admin", FormMethod.Post, new { enctype="multipart/form-data" }))
{
    <input type="file" name="File" id="file1" />
    <input type="file" name="File" id="file2" />
    <input type="submit" value="Upload Book" />
}

Request.ContentType remains "application/x-www-forum-urlencoded" in controller..

2
  • 5
    Don't worry, your English is perfect and your question is more than crystal clear. Nov 16, 2011 at 22:46
  • you should really consider using a plugin. makes life easier, not to mention dealing with multiple browsers/runtimes. We use plupload. Works great.
    – RPM1984
    Nov 16, 2011 at 23:13

6 Answers 6

37

The problem is that the NAME of the field need to match with the controller parameter. In your case is "files"... so your name attribute should be "files" also.

3
  • The parameter was always null for me when doing an <input type="file" multiple /> until the name attribute matched the function parameter name... Jun 20, 2014 at 20:11
  • Thanks, this fixed it for me, but now I have a new problem. Is there away to pass an id or attribute from the view that I can recognize and determine which file is which in the controller?
    – Mans
    Aug 21, 2017 at 21:14
  • @Mans, You can pass a ViewModel as an additional parameter with any field, besides de IEnumerable<HttpPostedFileBase> param (or only a ViewModel with the HttpPostedFileBase inside). If you need to identify what file is what, you could add several file inputs, and that way you know which is which.
    – Romias
    Aug 21, 2017 at 22:04
31

Just get rid of the square brackets in the names of your input fields:

@using (Html.BeginForm("BookAdd", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="files" id="file1" />
    <input type="file" name="files" id="file2" />
    <input type="submit" value="Upload Book" />
}

UPDATE:

After looking at the sample project you sent me the problem is that you have 2 nested forms. This is not allowed in HTML. You have one form in your _Layout.cshtml and another form in your BookAdd.cshtml view. That's the reason why despite the enctype="multipart/form-data" attribute on your inner form you were getting the wrong Request.ContentType. So you will have to unnest those forms if you want this to work. Also in the example you sent me your BookAdd controller action doesn't have the correct signature taking a list of files, but I guess that's due to some tests you were doing.

16
  • 1
    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). Reference w3.org/TR/html4/types.html#case Nov 16, 2011 at 22:58
  • I tried to do this, but it resulted in following: now I receive empty IEnumerable<HttpPostedFileBase> in controller (meaning Count = 0).
    – Roman
    Nov 16, 2011 at 23:24
  • @Farrel, then you must be doing something different than what you have shown here. I have tested the code and it worked fine. The controller you are posting to must have the following signature: public ActionResult BookAdd(IEnumerable<HttpPostedFileBase> files). Nov 17, 2011 at 6:53
  • Actually the problem if already found. See my first message, it's updated. (Problem with Request.ContentType)
    – Roman
    Nov 17, 2011 at 6:56
  • 1
    @Farrel, does the form have the enctype attribute when you look at the generated HTML source in the browser? Nov 17, 2011 at 7:00
7

I was facing same problem but in my case i got a solution of this.

[HttpPost]
    public ActionResult Upload()
    {
        foreach (string file in Request.Files)
        {               
           fileurl = Request.Files[file];
        }
        return View();
    }

In Design View.Please Comment out Form Tag <%-- <form id="form1" runat="server">--%> if using Master Page...I hope Your problem will be solve...

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Upload
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

   <%-- <form id="form1" runat="server">--%>
  <% using (Html.BeginForm("Upload","Home",FormMethod.Post,new {enctype="multipart/form-data"}))
{ %>

<fieldset>
        <legend>Upload File</legend>
         <div>

          <p>
Select a File: <input type="file" name="FileUpload" />
<input type="submit" value="Upload" />
</p>
</div>
</fieldset>

<% } %>
4

Worth noting if you're using AJAX then the upload will always come through as null, so make sure no jquery AJAX is attached to the form submit.

2

You must write some like this:

public class DocumentModelView 
{
        public HttpPostedFileBase File1 { get; set; }

        public HttpPostedFileBase File2 { get; set; }
}


@model Models.DocumentModelView

@using( Html.BeginForm( "Create", "Document", FormMethod.Post, new { enctype = "multipart/form-data" }) )
{
        <input type="file" name="File1" />
    <input type="file" name="File2" />
        <input type="submit" value="send" />
}


[HttpPost]
public ActionResult Create( DocumentModelView modelView )
{
.....
}
4
  • But he wants to upload multiple files, not one. Nov 16, 2011 at 22:45
  • Well, it still refuses to work. The only one thing I can think of is the variable name in controller. As I understood it can be any name (according to your example). Both File1 and File2 are null.
    – Roman
    Nov 16, 2011 at 23:17
  • Yes, DocumentModelView is only a object (I have get it from an exist project) that contains file informations.
    – ADIMO
    Nov 16, 2011 at 23:20
  • Actually I meant "modelView" by saying name.
    – Roman
    Nov 16, 2011 at 23:28
1

In my case y had to use the name instead of id.

Like this:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.