File upload ASP.NET MVC in multiple submits form

Question

I have a small tool that downloads reports based on the specified options. The download works well. And now, I want to also upload a file to the folder and then further use it.

The problem is that I already have one submit button on the form that is used for the download and when I am adding another button for the upload, only download is triggered.

I tried to resolve it using an @Html.ActionLink() , but no success. Is there any proper way to resolve the issue? I know that there is a possibility to capture the submit value and then check in one main ActionResult in the Controller and redirect to the respective ActionResult , but I don't want to do it, since there are too many POST Actions in one controller.

Here is my View - download.cshtml:

@using (Html.BeginForm())
{
    <fieldset>
        <div class="title">Click to download report</div>

        <div class="field">
            <input id="downloadBtn" type="submit" class="button" value="Download" />
        </div>
    </fieldset>

    <fieldset id="Option_ClientInfo">
        <div class="title">
            Image
        </div>

        <div class="field">
            <input type="file" name="ImageUpload" accept="image/jpeg" />
            <p>@Html.ActionLink("Upload", "UploadImage", new { controller = "Home", enctype = "multipart/form-data"}, new { @class = "button" })</p>
        </div>
    </fieldset>
}

And the controller - HomeController.cs:

public partial class HomeController : Controller
{
    // some functions
    // ....

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult UploadImage(HttpPostedFileBase imageFile)
        {
            string path = Path.Combine(this.GetImageFolder, Path.GetFileName(imageFile.FileName));
            imageFile.SaveAs(path);
            return null;
        }

    // additional POST functions for other forms
    // ....

        [HttpPost]
        public ActionResult Download(Info downloadInfo)
        {
            // perform checks and calculations
            return new reportDownloadPDF(downloadInfo);
        }
}

Any suggestion in appreciated.

Answer 1

The solution is just separate upload and download functionalities using two forms so it wont conflict while submitting.

   @using (Html.BeginForm())
        {
            <fieldset>
                <div class="title">Click to download report</div>

                <div class="field">
                    <input id="downloadBtn" type="submit" class="button" value="Download" />
                </div>
            </fieldset>

            <fieldset id="Option_ClientInfo">
                <div class="title">
                    Image
                </div>
            </fieldset>
        }

        @using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <fieldset>
                 <div class="field">
                    <input type="file" name="ImageUpload" accept="image/jpeg" />
                    <p>
                      <input id="uploadBtn" type="submit" class="button" value="Upload" />
                    </p>
                </div>
            </fieldset>
        }

There is another issue as well. Image control name and Post Action method parameter name should be same.

So your upload image Post Action method will be:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UploadImage(HttpPostedFileBase imageUpload)
 {
           string path = Path.Combine(this.GetBasePath + "/img/tmp/", Path.GetFileName(imageFile.FileName));
           imageFile.SaveAs(path);
           return null;
  }