CODEWITHSUNDEEP
c#jqueryforms
Keith
Keith

Reputation: 4147

how to upload a file using jquery + c#

I'm having issues trying to upload a docx file. First, when I click on "Choose File", the prompt opens up but the page reloads going to CheckInController/CheckIn url ( I thought that what you add in the Html.BeginForm is where your controller and method go when you click on submit ). Second thing is how do I know that the contents of the document are being sent to the server and not just the name or id?

https://jsfiddle.net/w6adx6za/1/

<div class="session-filter">
    @using (Html.BeginForm("CheckIn", "CheckInController", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div class="select-filter-title"><strong>Select File</strong></div>
        <table>
            <tr>
                <td><input name="fileResume" id="hiddenFileResume" type="file" value="" /><input type="submit" onclick="tested()"/></td>
            </tr>
        </table>
    }
</div>

function tested(){
    $.ajax({
      cache: false,
      type: "POST",
      url: "/SummaryStatementProcessing/CheckInSummaryStatement",
      data: data
  }); 
}

    public ActionResult CheckIn(HttpPostedFileBase fileResume){
         //work in here
    }

I don't need the page to go anywhere ( because this is actually in a dialog so it can close on submit, but currently it's reloading the page at the url above ). Currently I can't even get to the controller to check...

Upvotes: 1

Views: 53

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To do what you require, the easiest method is to send a FormData object in the request. However, you should ideally be hooking to the submit event of the form, not the click of the submit button, to stop the page redirecting.

You'll need to set the processData and contentType properties to false in the request. Also, the Action name does not appear to match your URL. You can fix that by using @Url.Action. The Action also needs the [HttpPost] attribute as that's the HTTP verb you're using in the AJAX request.

With all that said, try this:

<div class="session-filter">
  @using (Html.BeginForm("CheckIn", "CheckInController", FormMethod.Post, new { enctype = "multipart/form-data" }))
  {
    <div class="select-filter-title"><strong>Select File</strong></div>
    <table>
      <tr>
        <td>
          <input name="fileResume" id="hiddenFileResume" type="file" value="" />
          <input type="submit" />
        </td>
      </tr>
    </table>
  }
</div>

$('.session-filter form').submit(function(e) {
  e.preventDefault();
  $.ajax({
    cache: false,
    type: "POST",
    url: '@Url.Action("CheckIn", "SummaryStatementProcessing")',
    data: new FormData(this),
    processData: false,
    contentType: false,
  }); 
}

[HttpPost]
public ActionResult CheckIn(HttpPostedFileBase fileResume)
{
  // work in here
}

With the above code in place, you should then be able to work with the HttpPostedFileBase class in the Action.

Upvotes: 1

Related Questions