I have an image element which displays the user's current profile image. Can I change the src of that image to the image inside the file input?

Question

As you can see in the code below, I have an image element which displays the user's current profile image. I am wondering would it be possible to change the src='' of the image element to the image which would be stored in the input with type='file'? That is before the file is even uploaded to the file server.

<img class='profile-container-picture' src='{{url("storage/uploads/profile_pictures/edited/".$user->image_file_name)}}'>

<div class="upload-btn-wrapper">
    <button class="btn">Upload a new avatar</button>
    <input type="file" name="file" />
</div>

Answer 1

This question was asked so many times before. Here, have a look :

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

Reference: Preview an image before it is uploaded

Answer 2

Yes, you can! Here's a somewhat related question: HTML input type=file, get the image before submitting the form

The relevant answer to your question would be this answer: https://stackoverflow.com/a/47688875/3147669

It has some preview code you could use for inspiration:

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

How it works

When a user uploads a file into a form input it becomes available inside the files property of said input. This is an array because a file input can handle multiple files.

If you're only allowing one file to be uploaded it's safe to use files[0].

The FileReader class contains methods to read the file and return it's contents as a data url. This data url can be inserted into an <img /> tag's src attribute to render.

Answer 3

Vanilla JS example which also shows how to validate mime. Try it by running snippet.

const fileInput = document.getElementById('input');
const image = document.getElementById('image');

fileInput.addEventListener('change', addImage);

function addImage(event) {
  const file = event.target.files[0];

  // make sure it's image
  const [mime] = file.type.split('/');
  if (mime != 'image') {
    fileInput.value = '';
    return;
  };

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    // reader.result is base64 encoded string
    image.src = reader.result;
  });
  reader.readAsDataURL(file);
}

#image {
  max-width: 300px;
}

<input type="file" id="input" />

<img id="image" />

---

Reference: readAsDataURL