0

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.

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?

html:

 <div class="cc-profile-image"><a href="#"><img src="images/photo.png" alt="Image"/></a></div><!--ORIGINAL PHOTO-->

      <form action="images/photo.png" onchange="previewFile()" >
        Select image to upload:
        <input type="file" name="file" id="file" value>
        <label for="file"> Select a file to upload</label> 
        <input type="submit" value="Subir">
      </form>

js:

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 = "";
          }
        }

PS: I'm not using any database, I simply want to store the uploaded photo to /images.

pquiros
  • 1
  • 1
  • 2
  • Do you have a server running, or are you just editing an HTML file and a JS file? – cdrini Dec 04 '18 at 04:31
  • I have the github repository linked to heroku so I can have a live version of the project. That would be a server running, right? – pquiros Dec 04 '18 at 04:55
  • Yep! If your browser says `http://...` or `https://...` then you're viewing your page from a server running; if it says `file://...`, then you don't (i.e. you double-clicked the `.html` file). In which case zetawars is rights, you need some server-side code. – cdrini Dec 04 '18 at 05:09
  • Note that `action="images/photo.png"` is invalid right now; `action` should be the path to the server-side code that will be called when the form is submitted. That code will be given the form data (in this case the new image). – cdrini Dec 04 '18 at 05:10

1 Answers1

1

you don't require a database. But only the Server side scripting language is able to do that. Else you can store it on the client side. Javascript cannot store files on the server side. It can Upload to a Controller[Whatever handles the http Requests] that accepts a file and then the controller is responsible for saving it.

Here is a related answer. Which only saves a text file on server side. Saving a text file on server using JavaScript

Else you can use the browser's cache here is the link for that. JavaScript: Create and save file

zetawars
  • 1,023
  • 1
  • 12
  • 27