title: Pass file input from AJAX to C# WebMethod
body: <p>There are a few solutions floating around, however none seem to work for me.</p>
  
  <p>I have a File Input as per the below: (Bootstrap File Input)</p>
  
  <pre><code>&lt;div class="fileinput fileinput-new" data-provides="fileinput"&gt;
     &lt;div class="fileinput-new thumbnail" style="width: 200px; height: 150px;"&gt;
        &lt;img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;amp;text=no+image" alt=""/&gt;
     &lt;/div&gt;
     &lt;div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"&gt;
     &lt;/div&gt;
     &lt;div&gt;
        &lt;span class="btn default btn-file"&gt;
           &lt;span class="fileinput-new"&gt;
              Select image
           &lt;/span&gt;
           &lt;span class="fileinput-exists"&gt;
             Change
           &lt;/span&gt;
           &lt;input type="file" id="image" runat="server" accept=".gif|.jpeg|.jpg|.png" /&gt;
        &lt;/span&gt;
        &lt;a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"&gt;
           Remove
        &lt;/a&gt;
        &lt;a onclick="uploadImage();" class="btn blue fileinput-exists"&gt;Upload Image&lt;/a&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Upon selecting an image, and clicking 'Upload Image', the following JS function is run:</p>
  
  <pre><code> function uploadImage() {
      var file = $("#image")[0].files[0];
      var name = file.name;
      var size = file.size;
      var type = file.type;
  
      if (file.name.length &lt; 1) {
         return false;;
      }
      else if (file.size &gt; 10000000) {
         toastr.error('Error', 'Failed to upload image&lt;span class=\"errorText\"&gt;&lt;br/&gt;Selected file is greater than 10MB.&lt;/span&gt;');
         return false;;
      }
      else if (file.type != 'image/png' &amp;&amp; file.type != 'image/jpg' &amp;&amp; !file.type != 'image/gif' &amp;&amp; file.type != 'image/jpeg') {
         toastr.error('Error', 'Failed to upload image&lt;span class=\"errorText\"&gt;&lt;br/&gt;Selected file must be in one of the following formats: .gif, .jpeg, .jpg, .png.&lt;/span&gt;');
         return false;
      }
  
      var formData = new FormData();
      formData.append("name", name);
      formData.append("size", size);
      formData.append("type", type);
      formData.append("file", file);
  
      $.ajax({
         type: "POST",
         url: 'Pages.aspx/UploadImage',
         data: formData,
         cache: false,
         contentType: false,
         processData: false,
         success: function (data) {
            data = data.d;
            if (data == -2) {
               toastr.error('Error', 'Failed to upload image&lt;span class=\"errorText\"&gt;&lt;br/&gt;You do not have the required permissions to upload images.&lt;/span&gt;');
            } else if (data == -3) {
               toastr.error('Error', 'Failed to upload image&lt;span class=\"errorText\"&gt;&lt;br/&gt;There was a fatal error. Please contact support.&lt;/span&gt;');
            } else {
               toastr.success('Success', 'Image Id &lt;b&gt;' + data + '&lt;/b&gt; was saved successfully.');
            }
         },
         error: function (err) {
            toastr.error('Error', 'Failed to upload image&lt;span class=\"errorText\"&gt;&lt;br/&gt;There was a fatal error. Please contact support.&lt;/span&gt;');
         }
      });
   }
  </code></pre>
  
  <p>The associated web method is currently blank:</p>
  
  <pre><code> [WebMethod]
   public static int UploadImage(object Data)
   {
      if (!(Security.checkAccess("/pages/Pages.aspx").Contains("w"))) // 
      {
         return -2;
      }
      else
      {
         return -3;
      }
   }
  </code></pre>
  
  <p>The web method will eventually save the file and return the ImageId or associated error integer.</p>
  
  <p>Currently, the AJAX call to the web method does not occur, it simply provides a success message when it should only return one of the two error messages.</p>
  
  <p>Is there something glaring that I am missing? Any help will be greatly appreciated.</p>