Multiple File Upload HTML / CSS / JS - javascript

I would like to add a multiple file upload button to my application form on my website. Until now I can upload multiple files at once and a list of these files is displayed. However, I would now also like to first upload a few files and see the list and then I'd like to be able add more files and have that list stay. So far, however, the list of the already uploaded files disappears when I do that. This is the HTML, CSS as well as JS code, which I use until now. I would be happy if someone can give me tips on how to change this in the code.
I'm sorry if there are mistakes in my question. It's the first time I'm using stackoverflow and English isn't my first language.
Thanks for the help! :)
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
var children = "";
for (var i = 0; i < input.files.length; ++i) {
children += '<li>'+ input.files.item(i).name + '<span class="remove-list" onclick="return this.parentNode.remove()">X</span>' + '</li>'
}
output.innerHTML = children;
}
.custom-file {
position: relative;
font-family: helvetica;
overflow: hidden;
margin-bottom: 30px;
margin-top: 30px;
width: auto;
display: block;
padding: 10px;
}
.custom-file-input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
z-index: 100;
}
.custom-file img{
vertical-align: middle;
margin-right: 10px;
}
ul.file-list{
font-family: helvetica;
list-style: none;
padding: 0;
}
ul.file-list li{
padding: 5px;
}
.remove-list{
cursor: pointer;
margin-left: 10px;
}
<div class="custom-file">
<input type="file" class="custom-file-input" id="file" multiple onchange="javascript:updateList()" border=">
<label class="custom-file-label" for="file">
<img width="30" src="https://image.flaticon.com/icons/svg/54/54565.svg" /> Dateien auswählen</label>
</div>
<ul id="fileList" class="file-list"></ul>

Don't directly change the HTML of the output, instead just use appendChild() to add the element to the end.
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
var li = document.createElement("li");
li.innerHTML =
`${input.files[input.files.length - 1].name}
<span
class="remove-list"
onclick="return this.parentNode.remove()"
>X</span>`;
output.appendChild(li);
}
.custom-file {
position: relative;
font-family: helvetica;
overflow: hidden;
margin-bottom: 30px;
margin-top: 30px;
width: auto;
display: block;
padding: 10px;
}
.custom-file-input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
z-index: 100;
}
.custom-file img{
vertical-align: middle;
margin-right: 10px;
}
ul.file-list{
font-family: helvetica;
list-style: none;
padding: 0;
}
ul.file-list li{
padding: 5px;
}
.remove-list{
cursor: pointer;
margin-left: 10px;
}
<div class="custom-file">
<input
type="file"
class="custom-file-input"
id="file"
multiple
onchange="javascript:updateList()"
border=""
/>
<label class="custom-file-label" for="file">
<img
width="30"
src="https://image.flaticon.com/icons/svg/54/54565.svg"
/>
Dateien auswählen
</label>
</div>
<ul id="fileList" class="file-list"></ul>

Related

selected file name is not displaying

I have choose file input code,i need to change the text of the choose file and there should be a required keyword this working fine,but i want show the selected file below the button. Here is the fiddle
here is my code:
<form>
<div>
upload
<input type="file" class="hide_file" required>
</div>
<br><br>
<button type="submit" id="save" class="btn btn-default wf-save" >SAVE</button>
</form>
css:
div{
padding:5px 10px;
background:#00ad2d;
border:1px solid #00ad2d;
position:relative;
color:#fff;
border-radius:2px;
text-align:center;
float:left;
cursor:pointer
}
.hide_file {
position: absolute;
z-index: 1000;
opacity: 0;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
font-size: 24px;
width: 100%;
}
how to show the file name below the upload button.can anyone suggest how to do.
Actually, it was there. It was just hidden because of your CSS. You may create a new element then it will hold the filename.
$('.hide_file').change(function() {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
$('#filename').text(filename);
});
div {
padding: 5px 10px;
background: #00ad2d;
border: 1px solid #00ad2d;
position: relative;
color: #fff;
border-radius: 2px;
text-align: center;
float: left;
cursor: pointer
}
.hide_file {
position: absolute;
z-index: 1000;
opacity: 0;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
font-size: 24px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
upload
<input type="file" class="hide_file" required value="">
</div>
<br><br>
<button type="submit" id="save" class="btn btn-default wf-save">SAVE</button>
</form>
<p id="filename"></p>
Reference from here.

The dynamically added template div doesn't persist and disappears within seconds

I am new to web development and am trying to make a chat interface as a mini project. So, I am testing whether the messages can be displayed in the chat history window. I wrote the code in such a way that when I click the send button(even without typing anything in textbox) , the chat history must add a message for itself.
To do this, I have put a template for every new message. And when send is clicked, I am trying to add it through appendChild(). But, when I am clicking the send button, the new message stays for a fraction of second and disappears. You can say, it blinks. But I want it to be visible completely. Is my way of doing it wrong or is there a better and easy way to do it.
I have read that using innerHTML will have some side-effects and I have no knowledge about jQuery. So, please answer with that perspective.
Other suggestions regarding my coding style are also appreciated.
<html>
<head>
<style>
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
</style>
<script>
function submitfun() {
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
</script>
</head>
<body>
<div id="nav">
</div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="submitfun()">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
</html>
Because you're making use of a <form>, it attempts to submit the form by default.
To prevent this, you need to update your onsubmit to also pass the event:
<form onsubmit="submitfun(event)">
And prevent the default behaviour with:
function submitfun(e) {
e.preventDefault();
...
This can be seen in the following:
function submitfun(e) {
e.preventDefault();
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
<body>
<div id="nav"></div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="submitfun(event)">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
Ideally you should not submit the form.
Try something like below
<html>
<head>
<style>
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
</style>
<script>
function submitfun() {
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
</script>
</head>
<body>
<div id="nav">
</div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="javascript:return false;">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND" onclick="submitfun();">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
</html>

Force or Embed 7 images positioned Absolute into specific div?

so I am building a website, where users have their avatars loaded based on code that's given to JS function, it's 7 images all same size but different elements - Skin base, hair, eyes, mouth, shirt, shoes, pants.
They get loaded on page loading and they need to be stacked on top of each other.
Here is html:
<body onload="LoadCharDiv('codas', 'AvatarImgFrame');">
<div id="MainBody">
<div id="DataFrame">
<div class="DataObjects"><div class="InfoLabels">Account Level: </div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Profile Views: </div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Messages: </div><div class="InfoData" id="MessageData">0</div></div>
</div>
<div id="AccountFrame">
<div id="AccountAvatar">
<div id="AvatarImgFrame"><img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/></div>
<input type="button" id="sendPm" value="Send Message" name="sendPm"/>
</div>
<div id="AccountInfo">
<div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ."&nbsp". $row['last_name'] ." ". "(".$row['username'].")");?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
</div>
</div>
</div>
</body>
"LoadCharDiv()" is a JS function which just places images into div based on character code provided, don't think it's related but here it is anyway:
function LoadCharDiv(codas, div){
var code = "1c0c1c0c1c2c1";
var data = code.split("c");
var skins2 = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]], pants[data[4]], shoes[data[5]], torso[data[6]]];
var inhtml = "";
for(var d = 0; d < skins2.length; d++){
inhtml = inhtml + "<img src='"+skins2[d]+"'/>";
}
document.getElementById(div).innerHTML = inhtml;
}
And here is my CSS on page:
*{
margin: 0px;
padding: 0px;
font-family: 'Ubuntu', sans-serif;
}
body{
background-color: #111111;
margin: 1%;
}
#MainBody{
width: 60%;
margin-left: auto;
margin-right: auto;
height: 800px;
}
#AccountFrame{
width: 100%;
padding: 15px;
height: 100%;
background-color: #eeeeee;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
display: inline-block;
}
#DataFrame{
font-size: 2.0vh;
padding: 15px;
background-color: #eeeeee;
border-radius-top: 4px;
width: 100%;
text-align: right;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
display: inline-block;
}
#AccountAvatar{
float: left;
width: 30%;
}
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
#sendPm{
width: 100%;
height: 5.0vh;
background-color: #0071ff;
border: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #1A1A1A;
font-size: 2.0vh;
}
#sendPm:hover{
background-color: #308CFF;
}
.DetailLabel{
display: inline-block;
width: 9.7vh;
color: #0071ff;
}
.DetailInput{
width: 40%;
display: inline;
}
.DetailObjects{
width: 100%;
display: inline-block;
padding: 1vh;
}
#AccountName{
color: #0071ff;
}
#AccountInfo{
width: 68%;
float: left;
font-size: 1.7vh;
padding: 1vh;
height: 100%;
}
#NameObject{
font-size: 3vh;
padding: 0px;
padding-left: 1vh;
}
As you can see in image, with current
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
Character is placed on side of page, I want it to be placed right above Send Message button, and stay there without floating around screen if page gets resized.
Here is what it should be like:
I am thinking perhaps there is a way to layer images on top of each other without position: absolute?
Thanks.
Tried setting Parent position to relative.
#AccountAvatar{
float: left;
height: 500px;
position: relative;
width: 30%;
}
#AccountAvatar img{
width: 60%;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
}
Character appears below button.
Any way to adjust him to be above button?
Your absolute positioning is fine however, absolute elements are not in the normal content flow so you need to add a height to the container of the absolute elements.
http://jsfiddle.net/rwh3emp2/1/
#AvatarImgFrame is the container of the image
#AvatarImgFrame {
height: 230px;
}
You can remove the height from #AccountAvatar

javascript - action when file selected

I am trying to make Javascript do something in this case display an alert when a file is selected by the user in an . I am not sure if I my code actually gets into my javascript or not, Here is my code:
function showNoFile() {
if(document.getElementById("video-file-upload").value != "") {
alert("yeap");
}
}
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>
use it on DOM ready
$("#video-file-upload").change(function(){
if($(this).val() != ""){
alert("some file selected");
}
});
Fiddle
if (document.getElementById("video-file-upload").files.length == 0) {
alert("yeap");
}
Check for files.length is equal to 0.
with javascript:
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>

Event listener problems

I'm trying to make a simple blog like site for practice with a menu on the side that can be hidden or shown. I'm trying to make this happen with native Javascript in an external Javascript file. My problem is that my events are being triggered as soon as the site is loaded, or they aren't triggered at all. I'm sure I've made some beginners mistake. Here's my code:
Javascript:
var shower = document.getElementById('showmenu');
var hider = document.getElementById('site');
function hideshow() {
shower.onclick = function() {
document.getElementById('site').style.width="84%";
document.getElementById('menu').style.display="block";
document.getElementById('showmenu').style.display="none";
}
hider.onclick = function() {
document.getElementById('menu').style.display="none";
document.getElementById('site').style.width="100%";
document.getElementById('showmenu').style.display="block";
}
}
window.onload = function() {
hideshow();
}
HTML:
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title> Javascript Menu Test 2.0</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="menu">
<aside>
<ul>
<li><input type="text"></li>
<li>Vel Purus</li>
<li>Dolor Sit</li>
<li>Lorem Ipsum</li>
</ul>
</aside>
</div>
<div id="site">
<div id="bannerImage">
<input type="button" value="M" id="showmenu">
<img src="banner.jpg">
</div>
<div id="article">
<h1> Header</h1>
<!--text goes here-->
</div>
</div>
</div>
</div>
<script type="text/javascript" src="menuhider.js"></script>
</body>
</html>
CSS:
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
#wrapper {
height: 100%;
height: 100%;
}
#menu {
display: none;
position: fixed;
height: 100%;
width: 16%;
background-color: #131313;
float: left;
color: white;
font-family: 'arial', sans-serif;
}
#menu li {
margin-top: 8%;
margin-left: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
#menu li:hover {
cursor: pointer;
background-color: #424242;
}
#menu input {
border: none;
outline: none;
}
#site {
height: 100%;
width: 100%;
background-color: white;
float: right;
}
#site img {
position: relative;
z-index: 0;
width: 100%;
height: 10%;
}
#showmenu {
position: absolute;
position: fixed;
z-index: 1;
border: none;
width: 5%;
height: 5%;
margin-left: 1%;
background-color: #131313;
color: white;
outline: none;
}
#showmenu:hover {
cursor: pointer;
background-color: #424242;
}
#text {
width: 85%;
margin-left: 5%;
font-size: 1.2em;
}
There is no reason to use window.onload when the scrpt is included at the bottom. Remove that and just include the functions.
Another problem is you have two click events nested.
So they both are going to be triggered. You need to cancel the inner click so it does not propagate to the parent.
(function(){
var shower = document.getElementById('showmenu');
var hider = document.getElementById('site');
hider.onclick = function() {
document.getElementById('menu').style.display="none";
document.getElementById('site').style.width="100%";
document.getElementById('showmenu').style.display="block";
}
shower.onclick = function (e) {
document.getElementById('site').style.width="84%";
document.getElementById('menu').style.display="block";
document.getElementById('showmenu').style.display="none";
if (!e) {
e = window.event;
}
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
return false;
}
})();

Categories