How do I insert an uploaded image into an <IMG> tag/placeholder?

Question

How do I insert an uploaded image into an html < img > tag? Is it possible to create an < img > tag as placeholder for uploaded images?

I can select an image with "< input type="file" name="fileToUpload" id="fileToUpload" >" and after this i want to send that image to an img placeholder.

And is it possible to delete the uploaded image from the placeholder after the user closed the website?

Thanks a lot!

Answer 1

first "src" called "attribute"

what you have to do

1-locate you image on server -> see where did you upload the file first

2-take the path of the file and put it inside the "src" "attribute"

ex:

1-you uploaded the image lets say project/images

2-your image path will be in project/images/image.jpg

3-take this part and but it inside the src attribute

 src="project/images/image.jpg"

Answer 2

You can try like this

<input type="file" id="docpicker" accept="image/*" onChange={updateImageDisplay} multiple></input>
<div class="previewContainer">
   <p>No files currently selected for upload</p>
</div>

const updateImageDisplay = ss => {
  const input = document.querySelector('input');
  const previewContainer = document.querySelector('.previewContainer');
  [...input.files].forEach(file => {
    const image = document.createElement('img');
    image.src = URL.createObjectURL(file);
    previewContainer.appendChild(image);
  })
}

Answer 3

Try using canvas to crop the image

const updateImageDisplay = () => {
  const input = document.querySelector('input');
  const previewContainer = document.querySelector('.previewContainer');
  [...input.files].forEach(file => {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.onload = function() {
        var sourceX = 150;
        var sourceY = 0;
        var sourceWidth = 150;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = canvas.width / 2 - destWidth / 2;
        var destY = canvas.height / 2 - destHeight / 2;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
      };
      imageObj.src = URL.createObjectURL(file);
      previewContainer.appendChild(canvas);
  })
}