1

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

Improve this question
2
  • 2
    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** Commented Oct 5, 2021 at 20:39
  • Does this answer your question? Loading an image to a <img> from <input file> Commented Oct 5, 2021 at 20:47

3 Answers 3

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

  1. I'm unable to reproduce the problem in your dynamic "code snippet", but it's pretty clear what's happening.

  2. 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 :)

  3. 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

  4. ANOTHER POSSIBLE SOLUTION: Use FileReader.readAsDataURL():

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

Improve this answer

Comments

0

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(); }
Improve this answer

Comments