Develop Reference

how to fill a div with an image the user uploads?

I am working on a rudimentary site that enables users to upload images to the server and download them from it. I want to add a "preview" feature that will allow the user to see its photo beforehand. Here is my code:
<div class="container">
<input type="file" class="title3" id="picker"/>
<img src= this.input alt="IDK why, but I can't display that." class="title3">;

You can use JavaScript to dynamically update the image source of the img tag.
const img = document.getElementById('preview');
const input = document.getElementById('picker');
input.onchange = function(ev) {
const file = ev.target.files[0]; // get the file
const blobURL = URL.createObjectURL(file);
img.src = blobURL;
}
<div class="container">
<input type="file" class="title3" id="picker" />
<img id="preview" alt="IDK why, but I can't display that." class="title3" width="200">
</div>

I updated the code.
const selectFile = evt => {
const [file] = evt.target.files;
if (file) {
document.getElementById('preview').src = URL.createObjectURL(file);
}
}
<div class="container">
<input type="file" class="title3" id="picker" onchange="selectFile(event)" />
<img id="preview" alt="IDK why, but I can't display that." class="image">;
</div>

get new Value of div in function

I want to get width and height of the displayed image inside an image wrapper to do stuff with it. The Image ist displayed when selected, so the size of the wrapper changes. Since I need the size of the wrapper to do other stuff I use it as parameters. So after updating the image I get the height and width of the OLD image wrapper. So how can I modify my code to get the new dimensions of the wrapper after displaying the new image?
(I don't need information about submitting or anything. This is a reduced version of the code.)
<div style="width:300px">
<div id="image-wrapper" style="border:2px dashed blue">
<img src="text.jpeg" id="image" style="width:100%">
</div>
<p>width: <span id="x"></span></p>
<p>height: <span id="y"></span></p>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
<button type="submit">Submit
</button>
</form>
<script>
class Image {
static display ( event, target ) {
if ( event.files[0] ) {
let fileReader = new FileReader();
fileReader.onload = function (event) {
target.setAttribute( 'src', event.target.result );
}
fileReader.readAsDataURL(event.files[0]);
}
}
static ready (wrapper, x, y) {
x.innerHTML = wrapper.clientWidth;
y.innerHTML = wrapper.clientHeight;
}
}
</script>

EDITED: You have to wait for the image to load and THEN call your ready method!
<div style="width:300px">
<div id="image-wrapper" style="border:2px dashed blue">
<img src="text.jpeg" id="image" style="width:100%" onload="Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
</div>
<p>width: <span id="x"></span></p>
<p>height: <span id="y"></span></p>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));">
<button type="submit">Submit
</button>
</form>
<script>
class Image {
static display ( event, target ) {
if ( event.files[0] ) {
let fileReader = new FileReader();
fileReader.onload = function (event) {
target.setAttribute( 'src', event.target.result );
}
fileReader.readAsDataURL(event.files[0]);
}
}
static ready (wrapper, x, y) {
x.innerHTML = wrapper.clientWidth;
y.innerHTML = wrapper.clientHeight;
}
}
</script>

Try accessing the image itself's width, clientWidth, or offsetWidth property instead of the wrapper.

Show img ALT text inside a div

I'm using this code to show img alt inside show div. The problem is that it doesn't update at every img change.
Is there any different addEventListener that I can use so that it will change the alt at every visible image on the screen and without the need to click?
var myImage = document.getElementsByTagName("img");
var text = document.getElementById("show");
for (var i = 0; i < myImage.length; i++) {
myImage[i].addEventListener('click',show);
}
function show(){
var myAlt = this.alt;
text.innerHTML = myAlt;
}
Thanks in advance.

Why not simply iterate over the images as soon as the HTML is ready? Simply attach a single listener to the DOMContentLoaded event:
document.addEventListener('DOMContentLoaded', () => {
let images = [...document.querySelectorAll('img[alt]')]
for (const image of images) {
const altDiv = document.createElement('div')
altDiv.textContent = image.getAttribute('alt')
image.parentNode.appendChild(altDiv)
}
})
<div>
<img src="http://lorempixel.com/200/200/" alt="my beautiful alt text" />
</div>
<div>
<img src="http://lorempixel.com/200/100/" alt="my beautiful alt text 2" />
</div>
If you want to make sure the images are loaded before showing the alt text, do the showText magic on the load event of each image:
document.addEventListener('DOMContentLoaded', () => {
let images = [...document.querySelectorAll('img[alt]')]
for (const image of images) {
image.addEventListener('load', (e) => {
const altDiv = document.createElement('div')
altDiv.textContent = image.getAttribute('alt')
image.parentNode.appendChild(altDiv)
})
}
})
<div>
<img src="http://lorempixel.com/200/200/" alt="my beautiful alt text" />
</div>
<div>
<img src="http://lorempixel.com/100/200/" alt="my beautiful alt text 2" />
</div>
<div>
<img src="http://lorempixel.com/200/100/" alt="my beautiful alt text 3" />
</div>

JavaScript - user selection function

I am new to JavaScript and I'm working on something. This is what I've reached so far and here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Image Editor V 1.0</title>
<script>
function changeOpacity(newValue) {
document.getElementById("span").innerHTML = newValue*100 +'%';
document.getElementById("image1").style.opacity = newValue;
}
var color = true;
function imgColor() {
if (color) {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
color = false;
} else {
document.getElementById("image1").style.WebkitFilter = "none";
color = true;
}
}
function colorImg() {
document.getElementById("image1").style.WebkitFilter = "none";
}
function greyImg() {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
}
function userImage() {
var link = document.getElementById("userImg").value;
document.getElementById("image1").src = link;
}
</script>
</head>
<body>
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()" >Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages" id="image1" src="image4.jpg">
<img class="myImages" id="image2" src="image2.jpg">
<img class="myImages" id="image3" src="image3.jpg">
</body>
</html>
So far, the "Colored", "Greyscale", and "Alternate" buttons along with the opacity slider work as intended only on the first image (image1.jpg). Also, when the user inputs his own image, it replaces the first image and the functions work on it as intended. Here is what am trying to do:
1 - Let the user select which of the three images he wants to edit by clicking on it, then apply a border around it and use it in the other functions (greyscale and opacity). Here's what I tried (but didn't work):
<img class="myImages" id="image1" src="image4.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image2" src="image2.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image3" src="image3.jpg" onclick="selectImg(this.id)">
function selectImg(imgID) {
document.getElementById("imgID").style.border = 50px;
}
2 - When the user inputs his own image, I want it to replace all the 3 images I have displayed by default.
Your help is greatly appreciated. Thanks in advance!

You are missing quotes both on the id and the 50px. But it is better to define a style for the selection.
Then let a click handler first remove that style from all the images, except the clicked image, where it should set that style. The functions .classList.add and .classList.remove can be used for that.
Where you currently have document.getElementById('image1'), you would do instead:
document.querySelector('.selected')
Then you should also make sure that the page loads with one image selected, i.e. with the selected class.
Some other improvements make sure that when changing the selection, the opacity slider is also brought in line with that image's current opacity setting.
Here is a snippet that does all that:
function changeOpacity(newValue) {
document.getElementById("span").textContent = newValue*100 +'%';
document.querySelector(".selected").style.opacity = newValue;
document.querySelector('input[type=range]').value = newValue;
}
function getOpacity() {
return parseFloat(document.querySelector(".selected").style.opacity || '1');
}
function isColor() {
return document.querySelector(".selected").style.WebkitFilter !== "grayscale(100%)";
}
function imgColor() {
document.querySelector(".selected").style.filter =
document.querySelector(".selected").style.WebkitFilter =
isColor() ? "grayscale(100%)" : "none";
}
function colorImg() {
if (!isColor()) imgColor()
}
function greyImg() {
if (isColor()) imgColor()
}
function userImage() {
document.querySelector(".selected").src = document.getElementById("userImg").value;
}
// Add this function, and call it on click on an image
function select(img) {
Array.from(document.querySelectorAll('.myImages')).forEach(
myImg => myImg === img ? myImg.classList.add('selected')
: myImg.classList.remove('selected')
);
// bring opacity slider in line with selected image
changeOpacity(getOpacity());
}
.selected {
border: 1px solid;
}
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()">Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages selected" id="image1" onclick="select(this)"
src="//cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4">
<img class="myImages" id="image2" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
<img class="myImages" id="image3" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb">

First - you are not using that imgID, but String like that variable. Change to:
function selectImg(imgID) {
document.getElementById(imgID).style.border = 50px; //notice no quotes for imgID
activeImage = imgID; //set activeImage ID
}
And then when you are doing something to an image, don't use "image1", but activeImage that is global variable (defined outside and before functions).
And as for new uploaded image:
Put it into another div and work with such algorithm -
when (uploaded_new)
hide default pics
show DIV with new image
activeImage = uploadedPic

How can I pass an image that is uploaded by user to another div, when press a button?

In my code first div is for showing the image. Second div for uploading ani image and third div will show the preview. I want to display the uploaded image in the first div on button press.
<html>
<body>
<div id="imgspace1" class="container">
<!-- image preview div -->
<div id="image_preview1"><img id="previewing1" src="" /></div>
</div>
<!--image upload part-->
<div>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<input type='file' onchange="readURL(this);" />
</form>
</div>
<div id="image_edit" class="container">
<img id="image_preview" src="#" alt="Upload Image"/> </div>
<div>
<input id="confirm_button" type="button" value="Confirmn" onclick="('')"/>
</div>
</body>
</html>

If your prime concern is displaying a preview of the image you may use EZDZ
js library.Then you just have to add an image tag and import the .js and .css files and you will be able to see the preview and then upload it by ajax.

function readURL(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#previewing1').attr( "src", e.target.result );
};
FR.readAsDataURL( input.files[0] );
}
}
This code will read the uploaded image in file element.

<script type="text/javascript">
$(document).ready(function(){
$("#confirm_button").click(function{
var preview = $('#image_preview').attr('src');
$("#previewing1").attr("src", preview);
});
});
</script>
You can copy the src of third div image to first div image. And confirm button will be . You can write this unction in javascript also with onclick event.