title: HTML form upload file from url image using JavaScript
body: <p><strong>Some background information:</strong></p>
  
  <p>Users are able to input some book information and upload book cover image file through HTML form. Before they input information manually, they could use Google Book API to find some information, and by just click a button, some fields will be automatically filled using the information from Google Book API. For book cover image, Google API returns the image url, so I am trying find a way to transfer this url to a file object. Therefore, when users click the button to fill form using information from Google API, the image will be automatically uploaded there from image url. </p>
  
  <p>I have an image url such as: <a href="http://books.google.com/books/content?id=L2byvgEACAAJ&amp;printsec=frontcover&amp;img=1&amp;zoom=5&amp;source=gbs_api" rel="nofollow noreferrer">http://books.google.com/books/content?id=L2byvgEACAAJ&amp;printsec=frontcover&amp;img=1&amp;zoom=5&amp;source=gbs_api</a></p>
  
  <p>And I created an HTML form that allows users to upload their images. </p>
  
  <pre><code>&lt;div class="form-group"&gt;
          &lt;label for="book cover"&gt;Book Cover&lt;/label&gt;
          &lt;input type="file" class="form-control" name="book cover" accept="image/*" required&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to use JavaScript to transfer the image url to a file object and then prefill this file input for some users.</p>
  
  <p>How can I achieve this using JavaScript? Thanks!</p>