CODEWITHSUNDEEP
javascript
L'Architecht
L'Architecht

Reputation: 13

js error : "'createObjectURL' on 'URL': Overload resolution failed."

I try to display an image on a php page in js, knowing that my image via an input file. here is my code:

<script>
  function image(){
    var x = document.getElementById("image_uploads");
    var test = URL.createObjectURL(x);
    //document.getElementById("img").src = URL.createObjectURL(x);
    }
</script>

<body>
  <div class="frItem31">
    <form name="saisie" action="" method="post">
      Image 1 :<input type="file" id="image_uploads" class="image_uploads" name="image_uploads" accept="image/*"/> 
      <br>
       <img id="img" class="img">
       <br>
       <input type="button" id="calcVitesse" class="calcVitesse" value="calculer la vitesse" onclick="image()">
    </form>
  </div>
</body>

here is the error I get:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at image (image.php:20:32)
    at HTMLInputElement.onclick (image.php:80:125)
image @ image.php:20
onclick @ image.php:80

Could you help me please !?!

G.B.

Upvotes: 1

Views: 11536

Answers (1)

traynor
traynor

Reputation: 8682

you're passing an HTML element instead of a file. To get the file, use .files property, which behaves like an Array, so you can iterate it. see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files

try this:

  function image() {
    var x = document.getElementById("image_uploads");
    if (x.files.length) {
        var test = URL.createObjectURL(x.files[0]);
    }

  }

Upvotes: 2

Related Questions