HTML getting an image from a file upload

Question

I am working through an old project and trying to fix a few bugs.

I have a file upload in HTML

function updateImage() {
  circleArray = [];
  newPic = `id="taco" width="300" height="300"  src="${$(
    "#myFile"
  ).val()}" alt="prime.png"`;
  $("#hide").empty();
  $("#hide").append(`<img ${newPic}>`);
  makeCanvas();
}

<form>
  <input type="file" id="myFile" name="filename">
  <button id='submit'>Submit</button>
</form>

When I click the submit button I have a function that should update the image displayed with the newly uploaded image.

It seems like the file is uploaded but I am accessing it incorrectly.

I see the following error

GET c:\fakepath\IMG_0544.jpg net::ERR_UNKNOWN_URL_SCHEME

If image is upload to website than you have to save that image at a location through which you can retrieve it by `src` (url of hosted image) . As you take image from `c:\ ` it seems you are running project on local PC and as it is **privacy** and **security** breach(or can possible) if take the complete `src` of image from PC so browsers only display a fake path not a real one . One solution can be get the name of `image` uploaded and use a direct path to it like this : `C:\User\Images\**Image name**` — Rana, Oct 05 '21 at 20:39
Does this answer your question? [Loading an image to a from ](https://stackoverflow.com/questions/3814231/loading-an-image-to-a-img-from-input-file) — Twisty, Oct 05 '21 at 20:47

score 1 · Answer 1 · answered Oct 05 '21 at 20:49

I'm unable to reproduce the problem in your dynamic "code snippet", but it's pretty clear what's happening.
The error GET c:\fakepath\IMG_0544.jpg net::ERR_UNKNOWN_URL_SCHEME means that your browser was trying to access a file on your C:\ drive as though it were a remote URL. You can't do that :)
ONE POSSIBLE SOLUTION: try uploading the image and rendering it as an "embeddd image", per this article:

https://www.thesitewizard.com/html-tutorial/embed-images-with-data-urls.shtml
ANOTHER POSSIBLE SOLUTION: Use FileReader.readAsDataURL():

https://www.tutorialrepublic.com/faq/how-to-preview-an-image-before-it-is-uploaded-using-jquery.php

score 1 · Accepted Answer · answered Oct 05 '21 at 21:15

Consider the following.

$(function() {
  function updateImage() {
    var newPic = $("<img>", {
      id: "taco",
      alt: "prime.png"
    }).css({
      width: 300,
      height: 300
    });
    var myFile = $("#myFile")[0].files[0];
    var reader = new FileReader();
    reader.onload = function(event) {
      newPic.attr("src", event.target.result);
      $("#hide").empty().append(newPic);
    };
    reader.readAsDataURL(myFile);
    //makeCanvas();
  }

  $("form").submit(function(event) {
    event.preventDefault();
    updateImage();
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="file" id="myFile" name="filename">
  <button id='submit'>Submit</button>
</form>
<div id="hide"></div>

This reads the file from the input element and renders it as an Image.

score 0 · Answer 3 · answered Oct 05 '21 at 21:04

Try this :

function updateImage() {
      circleArray = [];
      newPic = `id="taco" width="300" height="300"  src="${$("#myFile").get(0).files[0].name}" alt="prime.png"`;
      $("#hide").empty();
      $("#hide").append(`<img ${newPic}>`);
      makeCanvas();
    }

HTML getting an image from a file upload

3 Answers3