We Keep Coding

How can I make this text that is button allow you to input pictures but disappear when picture is uploaded and comes back if you don't chose a photo?

How can I make this text that is button allow you to input pictures but disappear when picture is uploaded and comes back if you don't chose a photo?
<label class="btn btn-primary">
<img id="uploadPreview" style="width:200px;height:100px; text-align:right ; border:1px black;" />
<p class="image">Click to upload your pictures</p> <input type="file"id="uploadImage" name="myPhoto" style="display: none;"onchange="PreviewImage();" >
</label>
<script >
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
};
</script>

You can update the button visibility style on the onchange="PreviewImage();" event.
function PreviewImage() {
var oFReader = new FileReader();
var img = document.getElementById("uploadImage");
var btn = document.getElementsByClassName("image")[0];
if (img.files[0]){
btn.style.display = "none"; // hide button
oFReader.readAsDataURL(img.files[0]);
}else{
// uncomment this part if you want to clear image when you don't choose a photo
/* document.getElementById("uploadPreview").removeAttribute('src');
img.value = "";
btn.style.display = "block"; */
}
...

How to update image src attribute using user input value

I am building a simple photo editor app using imgix, and I want the image src attribute to be updated when a user input fields receive values. Is there a way to append my new parameters onto the end of the src url?
I have been able to use template literals to create a new url, however I haven't been able to figure out how or if I can update the image src as the user types. Or if the only way to do this would be submitting the changes and show the new image on page reload. I have tried reassigning image.src to the new url, but that hasn't worked.
HTML:
<form id="form" class="input-container">
<input type="text" placeholder="Enter Text" id="title"/>
<input type="text" placeholder="Enter Hexcode Color" id="overlay" />
<input type="submit" value="Apply Changes" id="edit-submit">
</form>
JavaScript:
let form = document.getElementById("form");
let titleInput = document.getElementById("title");
let encodedTitle = encodeURI(titleInput);
let overlayColor = document.getElementById("overlay");
let image = document.getElementById("image");
let timeout = null;
form.onkeyup = function(e) {
let encodedTitle = "&txt=" + encodeURI(titleInput.value);
let newColor = "&blend=" + overlayColor.value;
let url = new URL(`${image.src}`);
url = `${url}${encodedTitle}${newColor}`;
console.log(url);
document.getElementById("url-result").value = url;
image.src = url;
};
I am able to grab the values but I haven't figured out what I'm needing to do to apply it to the img src url.

Your code changes the URL of the image, but the URL gets longer and longer with each keyup.
Look at this snippet - maybe it helps.
let form = document.getElementById("form");
let titleInput = document.getElementById("title");
let encodedTitle = encodeURI(titleInput);
let overlayColor = document.getElementById("overlay");
let image = document.getElementById("image");
let timeout = null;
// URL base for your image - so it doesn't get longer-and-longer
// with each keyup
let baseURL = image.src
// just a display element, so you can see the URL created
let display = document.getElementById('new-url')
form.onkeyup = function(e) {
const newURL = `${baseURL}&txt=${encodeURI(titleInput.value)}&blend=${overlayColor.value}`
document.getElementById("url-result").value = newURL;
image.src = newURL
display.textContent = newURL
};
img {
width: 100px;
height: 100px;
}
<img id="image" src=""><br />
<label for="url-result">URL Result:
<input type="text" id="url-result">
</label>
<div>Display new URL: <span id="new-url"></span></div>
<form id="form" class="input-container">
<input type="text" placeholder="Enter Text" id="title" />
<input type="text" placeholder="Enter Hexcode Color" id="overlay" />
<input type="submit" value="Apply Changes" id="edit-submit">
</form>

Simple way to display chosen images

I'm looking for a simple way for a user to select a list of files for upload and have them display on screen before he decides to upload them.
This is the sort of logic I've been trying:
function printFiles(){
var inp = document.getElementById('selected');
for (var i = 0; i < inp.files.length; ++i) {
var img = new Image();
var name = inp.files.item(i).name;
img.src = name;
document.body.appendChild(img);
}
<head>
<title>Upload new File</title>
</head>
<body>
<h1>Upload new File</h1>
<form method=post enctype=multipart/form-data>
<p>
<input type=file name=file id=selected onclick=printFiles() multiple>
<input type=submit value=Upload>
</p>
</form>
</body>
This doesn't work and when I print the variable inp to the console, it shows null, as it's null until selected.
Is there a way to pass the file names to the function and display them on the page only after the user has clicked 'choose files' and then 'open'?

you have an error inside the loop, on inp.files.item you shoul use [i] instead of (i), this is and array of selected files on the input tag
function printFiles(){
var inp = document.getElementById('selected');
for (var i = 0; i < inp.files.length; ++i) {
var img = new Image();
// var name = inp.files.item(i).name;
var name = inp.files.item[i].name;
img.src = name;
document.body.appendChild(img);
}
<head>
<title>Upload new File</title>
</head>
<body>
<h1>Upload new File</h1>
<form method=post enctype=multipart/form-data>
<p>
<input type=file name=file id=selected onclick=printFiles() multiple>
<input type=submit value=Upload>
</p>
</form>
</body>

Here is an example of how to do it with javascript FileReader Api
function printFiles(){
var inp = document.getElementById('selected');
for (var i = 0; i < inp.files.length; ++i) {
displayImage(inp.files[i]);
}
}
function displayImage(file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('load', function(){
var img = new Image();
img.src = reader.result;
document.body.appendChild(img);
});
}

How to display image after selecting using Angular.js

I need one help.I have one image icon, when user will select that icon the file dialog will open and user will select the image.After selecting the image the image should display on that image icon.I am explaining my code below.
<div class="image-upload">
<label for="bannerimage">
<img src="{{attachImage}}"/>
</label>
<input type="file" data-size="lg" name="bannerimage" id="bannerimage" ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}" custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);" ngf-multiple="true">
</div>
my controller side code is given below.
$scope.attachImage="upload/logo.png";
$scope.uploadFile = function(event){
console.log('event',event.target.files);
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(file);
}
};
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
//var data={'image':e.target.result};
// $scope.stepsModel.push(data);
//$scope.myImage=e.target.result;
$scope.attachImage='';
$scope.attachImage=$scope.myImage;
});
});
Here i need when user will select the image the image will display on that particular image icon.Please help me.

I believe you need to use reader.onloadend instead of reader.onload
reader.onloadend = function () {
// set $scope.attachImage to reader.result;
}

How to clear one input type file in javascript from multiple file uploads

I have the 2 file upload field and each one have the 'Clear' Button.
When I upload the files and click one of the ''Clear' Button then all the
file upload are clear. but I need to clear one file.
Pleas see my code
<input type="file" id="control1"/>
<button id="clear1">Clear</button>
<input type="file" id="control2"/>
<button id="clear2">Clear</button>
var control = $("#control1");
$("#clear1").on("click", function () {
control1.replaceWith( control1 = control1.clone( true ) );
});
var control2 = $("#control2");
$("#clear2").on("click", function () {
control2.replaceWith( control2 = control2.clone( true ) );
});

Try this:
<script type="text/javascript">
function clear2() {
var fileUpload = document.getElementById("<%=control2.ClientID %>");
var id = fileUpload.id;
var name = fileUpload.name;
//Create a new FileUpload element.
var newFileUpload = document.createElement("INPUT");
newFileUpload.type = "FILE";
//Append it next to the original FileUpload.
fileUpload.parentNode.insertBefore(newFileUpload, fileUpload.nextSibling);
//Remove the original FileUpload.
fileUpload.parentNode.removeChild(fileUpload);
//Set the Id and Name to the new FileUpload.
newFileUpload.id = id;
newFileUpload.name = name;
return false;
}
function clear1() {
var fileUpload = document.getElementById("<%=control1.ClientID %>");
var id = fileUpload.id;
var name = fileUpload.name;
//Create a new FileUpload element.
var newFileUpload = document.createElement("INPUT");
newFileUpload.type = "FILE";
//Append it next to the original FileUpload.
fileUpload.parentNode.insertBefore(newFileUpload, fileUpload.nextSibling);
//Remove the original FileUpload.
fileUpload.parentNode.removeChild(fileUpload);
//Set the Id and Name to the new FileUpload.
newFileUpload.id = id;
newFileUpload.name = name;
return false;
}
</script>
<input type="file" id="control1"/>
<input id="Button1" type="button" value="clickme" onclick="clear1();" />
<input type="file" id="control2"/>
<input id="clickMe" type="button" value="clickme" onclick="clear2();" />