CODEWITHSUNDEEP
c#file-uploadrazorasp.net-mvc-4
Abdur Rahim
Abdur Rahim

Reputation: 4041

file upload in asp.net mvc 4 razor

I am using ASP .Net MVC 4.0 and VS10. I am a newbie in web application.

I have designed a page with html razor view. Here is some code of Index.cshtml:

@{
ViewBag.Title = "BAP Automation";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <form action="Index">
            <table>              **//EDITED BELLOW**
                <tr><form action="" method="post">
                    <td>Upload Excel File: </td>
                    <td><input type="text" name="NAMEtxtFileName"/></td>
                    <td><input type="button" value="Upload" id="IDbtnUpload" name="NAMEbtnUpload"/></td>
                    </form>
                </tr>
                <tr>
                    <td>Company Name: </td>
                    <td><input type="text" /></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td align="right"><input type="submit" value="Process" /></td>
                    <td></td>
                </tr>
            </table>
            </form>
        </div>
    </section>
}

I am trying to upload an excel file in NAMEbtnUpload's click event. clicking on this button we will be in this page, just a file upload dialog will open and selecting the file, the file location will be shown in the NAMEtxtFileName textbox.

EDIT 1:

I have written some code from the suggested code:

    [HttpPost]
    public ActionResult Index(HttpPostedFileBase NAMEbtnUpload)
    {
        if (NAMEbtnUpload.ContentLength > 0)
        {
            var fileName = Path.GetFileName(NAMEbtnUpload.FileName);
            var path = Path.Combine(Server.MapPath("~/App_Data/Given Excel's"), fileName);
            NAMEbtnUpload.SaveAs(path);
        }

        return RedirectToAction("Index");
    }

but this shows following error:

Server Error in '/' Application.

The resource cannot be found. Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Requested URL: /

Upvotes: 12

Views: 58571

Answers (4)

Brett Allred
Brett Allred

Reputation: 3487

Phil Haack shows you how to handle file uploads with his blog post Uploading a File (Or Files) With ASP.NET MVC.

There is quite a bit of stuff you are missing so reading that post will get you further than any answer here.

** UPDATE FOR EDIT 1 **

A couple issues

  1. <form action="index" > - this should be <form action="/ControllerName/Index">
  2. You have multiple form tags that are nested. You can have multiple form tags but they can't be nested. In your case your only need one. Most of the time you only need 1.
  3. <input type="button" value="Upload" id="IDbtnUpload" name="NAMEbtnUpload"/> should be

It is more conventional to use @using(Html.BeginForm()) as opposed to manually writing form tags. See below.

@using(Html.BeginForm("Index"))
{
 <table>
    <tr>
        <td>Upload Excel File: </td>
        <td><input type="text" name="NAMEtxtFileName"/></td>
        <td><input type="file" id="IDbtnUpload" name="NAMEbtnUpload"/></td>

    </tr>
    <tr>
        <td>Company Name: </td>
        <td><input type="text" /></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td align="right"><input type="submit" value="Process" /></td>
        <td></td>
    </tr>
 </table>
}

Upvotes: 10

Hemslingo
Hemslingo

Reputation: 272

Try adding the "EncType" attribute to your form.

@using (Html.BeginForm("ACTION", "CONTROLLER", FormMethod.Post, new { EncType="multipart/form-data"})){
  //FORM MARKUP HERE
}

Upvotes: 14

Esha Garg
Esha Garg

Reputation: 144

Set the name of file control in controller class. for example in above code 

public ActionResult Index(HttpPostedFileBase NAMEbtnUpload)

change NAMEbtnUpload to NAMEtxtFileName this resolve your problem.

Upvotes: 1

CodeCaster
CodeCaster

Reputation: 151720

clicking on [the upload] button we will be in this page, just a file upload dialog will open and selecting the file, the file location will be shown in the NAMEtxtFileName textbox.

That is not possible because a file upload element is not accessible programatically, anymore. "Back in the days" it was, and malicious sites silently uploaded sensitive information by setting the file upload control's value to well known password file locations and so on.

You'll just have to put an <input type="file" /> on your form and handle the upload serverside, as suggested in the link on @Bretts answer.

Upvotes: 4

Related Questions