title: How to save an uploaded photo to my HTML project using javascript
body: <p>I have this HTML page where you have a default image and if you click the "browse" button the image changes to the one you chose to open. Right now the chosen image shows up in the HTML, but it still has to be saved on the "/images" project folder.</p>
  
  <p>Here's my code so far. I've been researching for a couple of days and everything I've tried so far hasn't worked. Also, I'm new to HTML and js, so excuse me if there are any beginner mistakes. Any ideas of what I need to add to the js code?</p>
  
  <p>html:</p>
  
  <pre><code> &lt;div class="cc-profile-image"&gt;&lt;a href="#"&gt;&lt;img src="images/photo.png" alt="Image"/&gt;&lt;/a&gt;&lt;/div&gt;&lt;!--ORIGINAL PHOTO--&gt;
  
        &lt;form action="images/photo.png" onchange="previewFile()" &gt;
          Select image to upload:
          &lt;input type="file" name="file" id="file" value&gt;
          &lt;label for="file"&gt; Select a file to upload&lt;/label&gt; 
          &lt;input type="submit" value="Subir"&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>function previewFile(){
            var preview = document.querySelector('img'); //selects the query named img
            //preview.height = "512";
            //preview.width = "512";
            var file    = document.querySelector('input[type=file]').files[0]; //sames as here
            //file.height = "512";
            //file.width = "512";
            var reader  = new FileReader();
  
            reader.onloadend = function () {
                preview.src = reader.result;
            }
  
            if (file) {
                reader.readAsDataURL(file); //reads the data as a URL
            } else {
                preview.src = "";
            }
          }
  </code></pre>
  
  <p>PS: I'm not using any database, I simply want to store the uploaded photo to /images.</p>