CODEWITHSUNDEEP
c#asp.net-mvc-3file-upload
codingbiz
codingbiz

Reputation: 26386

Uploading file through an action of a controller - two forms in one view

The problem is I have two forms in the same view. The controller is Users and I have two actions for the two forms: Edit and UploadPhoto.

I have been using the Edit portion for awhile and it's working. Now I want to allow users to upload their photo on the same page. There is a separate button for saving the user information and another for saving the picture.

enter image description here

The page model is @model sportingbiz.Models.ViewModels.UserEditViewModel

The second form

<fieldset title="Upload photo">
    <legend>Change Profile Picture</legend>
    <div>
        @using(Html.BeginForm("UploadPhoto", "Users", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <table>
            <tr>
                <td>
                    <img src="@Url.Content("~/Content/images/noprofilepic.jpg")" 
                </td>
                <td>
                    <input type="file" name="photoFile" />
                    <br /><br />
                    <input type="submit" value="Upload" />
                </td>
            </tr>
            </table>                
        }
    </div>
</fieldset>

Controller

public class UsersController : Controller
{
    UsersRepository usersRepo = new UsersRepository();


    [Authorize]
    [HttpPost]
    public void UploadPhoto(HttpPostedFile photoFile)
    {
        if (photoFile == null)
        {
            return;
        }

        if (photoFile.ContentLength <= 0)
        {
            return;
        }

        string filename = Path.GetFileName(photoFile.FileName);
        if (Path.GetExtension(filename) == "")
            return;

    }
}

When I click upload my page navigates to http://localhost/mvcapp/Users/UploadPhoto with a blank screen. What I want is to return to the Edit page and probably show errors to the user that file was not uploaded. Features like ModelState.IsValid or ModelState.AddModelError

There is also no option of returning the same view e.g. return View(model)

Am I doing this wrong way? Some suggestion is to use Ajax uploader or Uploader. Am also thinking of separating the forms putting the Upload portion in its own view. Can PartialView help in this respect

Upvotes: 1

Views: 731

Answers (3)

Rajpurohit
Rajpurohit

Reputation: 1991

you uplode your image like that 

 public void UploadPhoto(HttpPostedFile photoFile)
 {}

i think you should little bit change you code like this 

 public void UploadPhoto(HttpPostedFileBase photoFile)
 {}

Upvotes: 0

aamankhaan
aamankhaan

Reputation: 491

try to validate the using jquery like below, which will make sure that user are force to select some file...

lets us assume you a view like below

<input type="file" name="Document" id="imgFile" style="height:25px;"/>
<input type="submit" value="Submit" id="btnSubmit"/>

below is the jquery to validate

$('#imgFile').change(function() {
    if ( ! $('#imgFile').val() ) {
    alert('Chose a file!');
    return false;
 }
});

or you can do this same on the Button click like below

$('#btnSubmit').click(function() {
    if ( ! $('#imgFile').val() ) {
    alert('Chose a file!');
    return false;
 }
});

hope this might help you...

Upvotes: 1

Henk Holterman
Henk Holterman

Reputation: 273274

[Authorize]
[HttpPost]
public void UploadPhoto(HttpPostedFile photoFile)
{

An Action with a void return is very strange. Make it return an ActionResult and determine on each branch where you want to go.

[Authorize]
[HttpPost]
public void UploadPhoto(HttpPostedFile photoFile)
{
    if (photoFile == null)
    {
        return RedirectToAction("ErrorPage");
    }
    ...

    var viewModel = ...;   // but your've lost the Edit part
    return View(viewModel);
 }

Upvotes: 1

Related Questions