file dialog

assets/script.js

@@ -44,6 +44,7 @@ function pageInit() {
     })
 }
 
+
 function uploadFile(file) {
     const ref = storageRef.child(fileId)
     const uploadTask = ref.put(file)
@@ -58,6 +59,7 @@ function uploadFile(file) {
 
 async function downloadFileFromStorage() {
     const fileRef = storageRef.child(fileId)
+    console.log(fileRef)
     const metadata = await getMetadata(fileRef)
     const { contentType, customMetadata: { fileName } } = metadata
     const url = await fileRef.getDownloadURL()
@@ -98,6 +100,7 @@ function setUploadProgress({ bytesTransferred, totalBytes }) {
 function successfulUpload(ref, fileName) {
     download.setAttribute('progress', 'Copy to clipboard')
     container.classList.add('active')
+    root.style.setProperty('--progress', 0)
     history.replaceState(undefined, '', `?ref=${fileId}`)
     ref.updateMetadata({
         customMetadata: {
@@ -129,16 +132,32 @@ async function getMetadata(fileRef) {
 }
 
 
-function copyToClipboard(text) {
-    const dummy = document.createElement("textarea");
-    document.body.appendChild(dummy);
-    dummy.value = fileUrl;
-    dummy.select();
-    document.execCommand("copy");
-    document.body.removeChild(dummy);
+function copyToClipboard() {
+    const textarea = document.createElement('textarea')
+    document.body.appendChild(textarea)
+    textarea.value = fileUrl
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+    document.location.replace('/')
 }
 
 
+function openFileDialog() {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.visible = false
+    document.body.appendChild(input)
+    input.onchange = () => uploadFile(input.files[0])
+    input.click()
+    document.body.removeChild(input)
+}
+
+upload.addEventListener('click', (e) => {
+    openFileDialog()
+})
+
+
 upload.addEventListener('drop', (e) => {
     uploadFile(e.dataTransfer.files[0])
     e.preventDefault()

assets/style.css

@@ -20,10 +20,6 @@ body {
   margin: 0;
 }
 
-/* .container {
-  width: %;
-} */
-
 .container.active .file {
   transform: rotateX(180deg);
 }
@@ -47,6 +43,14 @@ body {
   width: 100%;
 }
 
+.btn {
+  transition: transform 0.7s ease;
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
 .file {
   align-items: center;
   justify-content: center;
@@ -56,7 +60,7 @@ body {
   border-radius: 4px;
   height: 17rem;
   width: 15rem;
-  transition: box-shadow 0.3s, transform 0.4s ease;
+  transition: box-shadow 0.6s, transform 0.6s ease;
   transform-style: preserve-3d;
 }
 
@@ -66,20 +70,21 @@ body {
 
 .upload,
 .download {
+  align-items: center;
   background-image: linear-gradient(
     0deg,
     rgb(184, 255, 200) 0%,
     rgba(0, 0, 0, 0) calc(var(--progress) * 1%)
   );
   backface-visibility: hidden;
   border-radius: 4px;
-  position: absolute;
-  top: 0;
-  left: 0;
+  cursor: pointer;
   display: flex;
-  align-items: center;
   justify-content: center;
   height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
   width: 100%;
 }
 
@@ -107,6 +112,5 @@ body {
 }
 
 .download {
-  cursor: pointer;
   transform: rotateX(180deg);
 }

index.html

@@ -19,12 +19,14 @@
         <!-- <div class="divider"></div> -->
         <h2>stream.io</h4>
       </div>
-      <div class="file">
-        <div class="upload">
-          <i class="fas fa-cloud-upload-alt"></i>
-        </div>
-        <div class="download">
-          <i id="back"></i>
+      <div class="btn">
+        <div class="file">
+          <div class="upload">
+            <i class="fas fa-cloud-upload-alt"></i>
+          </div>
+          <div class="download">
+            <i id="back"></i>
+          </div>
         </div>
       </div>
     </div>