title: How to upload image to firebase cloud storage from input field?
body: <p>I have an input field, where users can choose what image they want to upload, and then I need to send to cloud storage. The problem is, I don't know how to get the file they selected. I saw a lot questions like <a href="https://stackoverflow.com/questions/31353703/how-to-upload-image-file-from-computer-and-set-as-div-background-image-using-jqu">this</a>, <a href="https://www.codeproject.com/Questions/602912/howplustoplusgetplusfullplusfilepluspathplusfrompl" rel="noreferrer">this</a>, <a href="https://stackoverflow.com/questions/22087076/how-to-make-a-simple-image-upload-using-javascript-html">this</a>, etc. Most of the questions I saw, like <a href="https://stackoverflow.com/questions/5802580/html-input-type-file-get-the-image-before-submitting-the-form">this</a> one, are asking for previewing the images BEFORE uploading. I don't think I need to preview the image, i just want to upload it. How do I do this? Here is my current code:</p>
  
  <pre><code>function addImage() {
    $("#addImage").append('\
      &lt;input type="file" id="image" accept="image/*"&gt;\
      &lt;button type="submit"&gt;ok&lt;/button&gt;\
      &lt;button onclick="cancelAddImage()"&gt;cancel&lt;/button&gt;');
    $("#addImage").submit(function() {
      var image = $("#image").files;
      console.log(image);
      storage.ref("images").put(image).then(function(snapshot) {
        console.log('Uploaded a file!');
      });
    });
  }
  </code></pre>
  
  <p>The console.log() for this is giving "undefined". I also tried <code>.files[0]</code> instead of <code>.files;</code>, and many others.</p>