HTML form upload file from url image using JavaScript

Question

Some background information:

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.

I have an image url such as: http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api

And I created an HTML form that allows users to upload their images.

<div class="form-group">
        <label for="book cover">Book Cover</label>
        <input type="file" class="form-control" name="book cover" accept="image/*" required>
    </div>

Now I want to use JavaScript to transfer the image url to a file object and then prefill this file input for some users.

How can I achieve this using JavaScript? Thanks!

Answer 1

For your case, I think you must save the link to input hidden and submit to server side to get that image. If you want to show the preview for user, just create a <img src=" http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api" /> on your form.

Put hidden input to keep the link from user:

<input type="hidden" name="image-url" value="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api">

<img src="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api"/>

And then, you have to take action download this image on your server side.

Answer 2

Please use below code to make it working :

Function

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

HTML Form view

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>