title: Uploading image to ASP.NET Core app using AJAX
body: <p>I am new to jQuery and AJAX and I am trying to upload image to my server using it. I have a simple html page</p>
  
  <pre><code>&lt;body&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;form method="post" enctype="multipart/form-data"&gt;
      Select image to upload:
      &lt;input id="profilePic" name="picture" type="file" size="1" onchange="uploadFile('profilePic');" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>where script file is </p>
  
  <pre><code>function uploadFile(inputId) {
  var fileUpload = $("#" +inputId).get(0);
  var files = fileUpload.files;
  var formData = new FormData();
  formData.append(files[0].name, files[0]);
  
  $.ajax({
      url: '/Image/File',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function (result) {
      }
  });
  </code></pre>
  
  <p>In my controller named ImageController I have a POST method named File which takes zero arguments:</p>
  
  <pre><code>[HttpPost]
  public IActionResult File()
  {
      var file = Request.Form.Files[0];
  
      if (file != null)
      {
          //work
      }
  
      return null;
  }
  </code></pre>
  
  <p>but everytime I submit an image to form nothing happens and I get code 500: internal server error, failed to load resource. I have placed breakpoints in my code but it never entered the File method. What am I doing wrong? htmlpage and script are located in wwwroot, controller is in Controllers folder.</p>