0

This is my code and I need to select the file uploaded by the user display it on the screen and then use it in an API

<div class="first">
            <p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)"</p>
            <p><img id="output" width="200" /></p>
</div>

var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
    };
Kriti Singh
  • 25
  • 4

2 Answers2

0

Hi actually you code is not wrong you just missing ">" before 

<p><input type="file"  accept="image/*" name="image" id="file" onchange="loadFile(event)"</p>

change it to 

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)"></p>

Your final code will look like this good luck.

<div class="first">
  <p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)"></p>
  <p><img id="output" width="200" /></p>
</div>


<script type="text/javascript">
  var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
  };
</script>
Dinesh Omapathi
  • 33
  • 1
  • 6
  • no actually that was just a mistake while I was copying the code to post here ... I wanted to know how can I take this image which I am displaying on the screen and use it perform image analysis using Google's Vision Api . – Kriti Singh Feb 13 '20 at 09:09
0

Follow the steps in the link to upload files on GCloud Bucket using Node.js https://cloud.google.com/nodejs/

PS. You can do it for any language just type gcloud-< language > in your search bar you'll find the steps to do so in your language https://www.youtube.com/watch?v=ji1DWCTI05A This video by Sandip Dinesh solved my query , hope it solves yours too :)

Kriti Singh
  • 25
  • 4