CRICS/streamupload
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

File selector

Browse Source
This commit is contained in:
pepa65 2022-09-15 19:26:50 +07:00
parent 8a7cb63647
commit c35f563036
2 changed files with 99 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
uploadpage/index.php
View File

@ -11,6 +11,12 @@ function respond(){
const feedback = document.getElementById("response");
feedback.innerHTML = "<b>File is uploading</b>";
}
function filename(){
var name = document.getElementById("name");
name.innerHTML = document.getElementById("input").files[0].name;
name.style.color = "black";
name.style.fontWeight = "normal";
}
</script>
<div class="container">
<div class="incontainer">
@ -20,15 +26,20 @@ function respond(){
<input id="logoff" type="submit" name="logoff" value="Logoff">
</form></div>
<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="respond()">
<select name="target" id="target" required>
<select name="target" id="target" required title="Click to select where to stream to">
<option value="" disabled selected hidden>Streaming Destination</option>
<option value="Restream">Restream</option>
<option value="Facebook">Facebook</option>
<option value="YouTube">YouTube</option>
</select>
<input type="text" name="streamkey" placeholder="Stream Key" required title="string of 0-9, a-z, A-Z, underscore or dash characters" pattern="[a-zA-Z0-9_-]+">
<input type="text" name="streamkey" placeholder="Stream Key" required title="Enter a string of 0-9, a-z, A-Z, underscore or dash characters" pattern="[a-zA-Z0-9_-]+">
<input type="datetime-local" name="datetime" title="Click on the date to get a popup" required>
<input type="file" name="file" required accept=".mp4">
<!--input type="file" name="file" required accept=".mp4" title="Click to select a video"-->
<div class="fileinput">
<input id="input" type="file" name="file" required accept=".mp4" onchange="filename()">
<input class="abs">
<p class="abs" id="name">Click to select the video</p>
</div>
<input type="email" name="email" placeholder="Email to notify" title="Not required">
<input type="submit" value="Schedule Stream" name="schedule">
<p id="response"></p>

115
uploadpage/page.css
View File

@ -1,3 +1,27 @@
body {
margin:0;
font-family:sans-serif;
font-size:16px;
text-align:center;
}
.container {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
}
.incontainer {
width:325px;
max-width:325px;
}
h4 {
border-radius:4px;
color:white;
background-color:red;
padding:.9em;
margin-bottom:8px;
}
input,select {
text-align:center;
width:100%;
@ -8,44 +32,34 @@ input,select {
border-radius:4px;
box-sizing:border-box;
font-size:16px;
font-weight:bold;
}
select {
cursor:pointer;
padding-top:12px;
padding-bottom:-7px;
}
input[type=datetime-local] {
cursor:pointer;
margin-bottom:-7px;
}
input[type=email] {
margin-top:5px;
margin-bottom:5px;
}
input[type=file] {
background-color:#4CAF50;
color:white;
text-align:left;
cursor:pointer;
}
input[type=submit] {
text-align:center;
width:100%;
background-color:#4CAF50;
color:white;
padding:14px 20px;
margin:8px 0;
border:none;
border-radius:4px;
cursor:pointer;
font-size:16px
}
body {
margin:0;
font-family:sans-serif;
font-size:16px;
}
.container {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
}
.incontainer {
width:325px;
max-width:325px;
}
h1 {
text-align:center;
}
h4 {
text-align:center;
color:white;
background-color:red;
padding:.7em;
}
.user {
display:flex;
@ -55,3 +69,44 @@ h4 {
#logoff {
width:100px;
}
/*::file-selector-button {
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
}*/
.fileinput {
position:relative;
max-width:fit-content(325px);
}
#name {
padding-top:5px;
color:white;
font-weight:bold;
width:100%;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
input.abs {
background-color:#4CAF50;
padding:14px 20px;
margin:8px 0;
border:none;
border-radius:4px;
cursor:pointer;
font-size:16px
}
.abs {
position:absolute;
top:0px;
left:0px;
z-index:1;
}
#input {
position:relative;
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
z-index:2;
}