From c35f56303612d894f876a743071180621ed1887b Mon Sep 17 00:00:00 2001
From: pepa65 <pepa65@passchier.net>
Date: Thu, 15 Sep 2022 19:26:50 +0700
Subject: [PATCH] File selector

---
 uploadpage/index.php |  17 +++++--
 uploadpage/page.css  | 115 ++++++++++++++++++++++++++++++++-----------
 2 files changed, 99 insertions(+), 33 deletions(-)

diff --git a/uploadpage/index.php b/uploadpage/index.php
index cfbae81..d5c0f77 100755
--- a/uploadpage/index.php
+++ b/uploadpage/index.php
@@ -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>
diff --git a/uploadpage/page.css b/uploadpage/page.css
index 0730f81..a6af73f 100755
--- a/uploadpage/page.css
+++ b/uploadpage/page.css
@@ -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;
+}