title: Attach a blob to an input of type file in a form
body: <p>How to append blob to input of type file?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- Input of type file --&gt;
  &lt;input type="file" name="uploadedFile" id="uploadedFile" accept="image/*"&gt;&lt;br&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// I am getting image from webcam and converting it to a blob
  function takepicture() {
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(video, 0, 1, width, height);
      var data = canvas.toDataURL('image/png');
      var dataURL = canvas.toDataURL();
      var blob = dataURItoBlob(dataURL);
      photo.setAttribute('src', data);
  }
  
  function dataURItoBlob(dataURI) {
      var binary = atob(dataURI.split(',')[1]);
      var array = [];
      for(var i = 0; i &lt; binary.length; i++) {
          array.push(binary.charCodeAt(i));
          return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
      }
  
      // How can I append this var blob to "uploadedFile". I want to add this on form submit
  
  </code></pre>