title: Post Base64 image to Mvc controller
body: <p>Consider this base64 encode image</p>
  
  <pre><code>&lt;img src='data:image/Png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABICAYAAABhlHJbAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAAAAEZ0FNQQAAsY8L/GEFAAAACXBIWXMAABVlAAAVZQGF3cVdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABnNJREFUeF7tnFls3EQYx11ucQshClWbtb1LC4RLIARIHAXxgsQDCOWhJGs7mypIoII4BAIhsYAEWY+TlEo8FAQSQjxAuR54AnFUFHH0CQlEEWcaQhpKmx5poVWb8H3eb92Jd7Nre8a7a2d/0l9txvN99vw1HnvtGSsdqskYzu2ayb4A7dNN9oNm2E8qPW8fT5s71EOznDwYdxQ0x0s12LtXD248kaoFpFg8TisMX6Gb9t264dwHSR5PtEz7Mc10BrE92b6RnKLMLaGWulDPO+w3ryLoje8FMlG37As1094IQX/7k6RJqsl+wdNz2WDxVDXProWyGX8dv+qamFu34WQwbz1UPOIPTLec3+HfndXltQU9+P0qE1Vr9GzY+K2/MugACAfUd8q9Mslir4M+BMO+oXb52xpYaOLq1cUTyLziKVCIJvGVtmYMdlf4gTMZ4NkGpjq+NoeTwZ51k8EA+zS/AcaG5z13U0o2zy6FtoqO8ZNKpm/0AvgP350Z7SO1kHlTXJujalqB3vZApQCvSti1aT+pJGcOdUNbZZiHegtP308qBXCJfoL2k0q6+p1LYNzbwRkgoumca /&gt; 
  </code></pre>
  
  <p>I would like to post this src to Mvc controller but getting null when post with ajax here is the post method.</p>
  
  <pre><code>    var file = document.getElementById("base64image").src;
  
          var formdata = new FormData();
          formdata.append("base64image", file);
  
          $.ajax({
              url: "http://localhost:26792/home/SaveImage",
              type: "POST",
              data: file
  
  
  
          });
  </code></pre>
  
  <p><strong>Mvc Controller</strong></p>
  
  <pre><code>    [HttpPost]
  
      public void SaveImage(Image file)
      {
  
      }
  </code></pre>
  
  <p>I think the datatype I am using is not valid for this please suggest me what can I do here.</p>
  
  <p><a href="https://i.stack.imgur.com/Sy5RC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Sy5RC.png" alt="enter image description here"></a></p>
  
  <p><strong>Full Html Code</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;WebcamJS Test Page&lt;/title&gt;
  &lt;style type="text/css"&gt;
      body { font-family: Helvetica, sans-serif; }
      h2, h3 { margin-top:0; }
      form { margin-top: 15px; }
      form &gt; input { margin-right: 15px; }
      #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="results"&gt;Your captured image will appear here...&lt;/div&gt;
  
  &lt;h1&gt;WebcamJS Test Page&lt;/h1&gt;
  &lt;h3&gt;Demonstrates simple 320x240 capture &amp;amp; display&lt;/h3&gt;
  
  &lt;div id="my_camera"&gt;&lt;/div&gt;
  
  &lt;!-- First, include the Webcam.js JavaScript Library --&gt;
  &lt;script type="text/javascript" src="../webcam.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Configure a few settings and attach camera --&gt;
  &lt;script language="JavaScript"&gt;
      Webcam.set({
          width: 320,
          height: 240,
          image_format: 'jpeg',
          jpeg_quality: 90
      });
      Webcam.attach( '#my_camera' );
  &lt;/script&gt;
  
  &lt;!-- A button for taking snaps --&gt;
  &lt;form&gt;
      &lt;input type=button id="takeshot" value="Take Snapshot" onClick="take_snapshot()"&gt;
  &lt;/form&gt;
  
  &lt;!-- Code to handle taking the snapshot and displaying it locally --&gt;
  &lt;script language="JavaScript"&gt;
  
      window.onload = function () {
  
          setInterval(function () { take_snapshot() }, 5000);
      }
      function take_snapshot() {
          // take snapshot and get image data
          Webcam.snap( function(data_uri) {
              // display results in page
              document.getElementById('results').innerHTML = 
                  '&lt;h2&gt;Here is your image:&lt;/h2&gt;' + 
                  '&lt;img id="base64image" src="' + data_uri + '"/&gt;';
          });
  
  
  
          var file = document.getElementById("base64image").src;
  
          var formdata = new FormData();
          formdata.append("base64image", file);
  
          $.ajax({
              url: "http://localhost:26792/home/SaveImage",
              type: "POST",
              data: file
  
  
  
          });
          //var ajax = new XMLHttpRequest();
          //ajax.addEventListener("load", function (event) { uploadcomplete(event); }, false);
          //ajax.open("POST", "http://localhost:26792/home/SaveImage");
  
          //ajax.send(formdata);
      }
      &lt;/script&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>