web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add progress bar to file upload

Browse Source
This commit is contained in:
ansuz
2017-05-18 17:57:42 +02:00
parent 164342920e
commit d324a054f2
2 changed files with 63 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
www/file/inner.html
View File

@@ -31,10 +31,28 @@
z-index: -1;
}
#upload-form {
padding: 0px;
margin: 0px;
position: relative;
width: 50vh;
height: 50vh;
display: block;
margin: auto;
}
#upload-form label{
position: relative;
}
.hovering {
background-color: rgba(255, 0, 115, 0.5) !important;
}
.block {
display: block;
height: 500px;
width: 500px;
height: 50vh;
width: 50vh;
}
.hidden {
display: none;
@@ -43,6 +61,7 @@
border: 2px solid black;
background-color: rgba(50, 50, 50, .10);
margin: 50px;
display: block;
}
.inputfile:focus + label,
@@ -50,13 +69,26 @@
background-color: rgba(50, 50, 50, 0.30);
}
#progress {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 0%;
max-width: 100%;
max-height: 100%;
background-color: rgba(255, 0, 115, 0.75);
z-index: 10000;
display: block;
}
</style>
</head>
<body>
<div id="toolbar" class="toolbar-container"></div>
<div id="upload-form" style="display: none;">
<input type="file" name="file" id="file" class="inputfile" />
<label for="file" class="block">Choose a file</label>
<label for="file" class="block">Choose a file<span class="block" id="progress">&nbsp;</span></label>
</div>
<div id="feedback" class="block hidden">
</div>