Uploading image in ASP.NET MVC

Question

I have a Upload form and I want to pass my information such as an Image and some other field but I don't know how can I upload Image ..

this is my controller code :

[HttpPost]
        public ActionResult Create(tblPortfolio tblportfolio)
        {
            if (ModelState.IsValid)
            {
                db.tblPortfolios.AddObject(tblportfolio);
                db.SaveChanges();
                return RedirectToAction("Index");  
            }

            return View(tblportfolio);
        }

And this is my view code :

@model MyApp.Models.tblPortfolio

<h2>Create</h2>

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>tblPortfolio</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ImageFile)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.ImageFile, new { type = "file" })
            @Html.ValidationMessageFor(model => model.ImageFile)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Link)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Link)
            @Html.ValidationMessageFor(model => model.Link)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Now I don't know how can I upload Image and save it on server .. how can I set Image name by Guid.NewGuid(); ? Or how can I set Image Path ?

Solution 1

Firstly, you'll need to change your view to include the following:

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

Then you'll need to change your post ActionMethod to take a HttpPostedFileBase, like so:

[HttpPost]
public ActionResult Create(tblPortfolio tblportfolio, HttpPostedFileBase file)
{
    //you can put your existing save code here
    if (file != null && file.ContentLength > 0) 
    {
        //do whatever you want with the file
    }
}

Solution 2

You can get it from Request using Request.Files Collection, In case of single file upload just read from the first index using Request.Files[0]:

[HttpPost]
public ActionResult Create(tblPortfolio tblportfolio) 
{
 if(Request.Files.Count > 0)
 {
 HttpPostedFileBase file = Request.Files[0];
 if (file != null) 
 { 
  // business logic here  
 }
 } 
}

In case of Multiple files uploading, you have to iterate on the Request.Files collection:

[HttpPost] 
public ActionResult Create(tblPortfolio tblportfolio)
{ 
 for(int i=0; i < Request.Files.Count; i++)
 {
   HttpPostedFileBase file = Request.Files[i];
   if (file != null)
   {
    // Do something here
   }
 }
}

If you want to upload file without page refresh via ajax then you can use this article which uses jquery plugin

Comments

[Persian.]

I use your code and I think it works correctly but it show to me an error : Access to the path 'C:\Users\Administrator\Desktop\ND\MyApp\MyApp\Uploads' is denied. Do you know why ? why it shows to me this error on local ?

[mattytommo]

Hmmm, You need to find out from the application pool for the website what is the identity it is running under (by default this is Application Pool Identity) and grant that the correct permissions.

[Persian.]

I Change my Application Pool Identity to Localsystem .. I red somewhere about this that I must change it to localsystem but it's not working .. any suggestion ?

[mattytommo]

Hmm, look here learn.iis.net/page.aspx/624/application-pool-identities and make sure you've followed all those steps, that should work fine :)

[mattytommo]

@Persian Good stuff! Glad I could help :)

[John Zumbrum]

Here's some more information haacked.com/archive/2010/07/16/…