web/src/main.scss

@@ -29,7 +29,7 @@ body {
 }
 
 .unselectable {
-  user-select: none;
+    user-select: none;
 }
 
 hr {
@@ -88,9 +88,7 @@ th {
   cursor: pointer;
 }
 
-img,
+img, audio, video {
-audio,
-video {
   border-radius: $padding;
   margin-bottom: $padding;
   max-height: 75vh;
@@ -98,9 +96,11 @@ video {
 }
 
 textarea {
-  @extend .paste;
+  width: 100%;
-  height: 75vh;
+  height: 100%;
-  border-color: white;
+  min-width: 75vw;
+  min-height: 75vh;
+  box-sizing: border-box;
 }
 
 .primary {
@@ -117,29 +117,3 @@ textarea {
     padding-left: $padding;
   }
 }
-
-.button {
-  @extend .hljs;
-
-  border: 1px solid white;
-  border-radius: $padding;
-  padding: $padding;
-  margin: $padding;
-  font-size: 16px;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.file-upload {
-  @extend .button;
-
-  input {
-    display: none;
-  }
-}
-
-.text-upload {
-  @extend .button;
-}

web/src/render.tsx

@@ -25,21 +25,20 @@ require('highlightjs-line-numbers.js');
 
 const FileForm = () => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let file = event.target.files![0];
     const fr = new FileReader();
-    fr.onload = (_e) => {
+    fr.onload = (e) => {
-      let data = new Uint8Array(fr.result as ArrayBuffer);
+      const { result } = e.target;
-      encrypt_array_buffer(data);
+      if (result instanceof ArrayBuffer) {
+        let data = new Uint8Array(result);
+        encrypt_array_buffer(data);
+      }
     }
-    fr.readAsArrayBuffer(file);
+    fr.readAsArrayBuffer((event.target as HTMLInputElement).files[0]);
   }
 
-  return <>
+  return (
-    <label className="file-upload" >
+    <input type="file" onChange={handleChange} />
-      Select a file
+  )
-      <input type="file" onChange={handleChange} />
-    </label>
-  </>
 }
 
 const PasteForm = () => {
@@ -51,21 +50,22 @@ const PasteForm = () => {
   }
 
   return (
-    <form className='hljs centered' onSubmit={handleSubmit}>
+    <pre className='paste'>
-      <textarea
+      <form className='hljs centered' onSubmit={handleSubmit}>
-        placeholder="Sample text"
+        <textarea
-        value={value}
+          placeholder="Sample text"
-        onChange={(e) => setValue(e.target.value)}
+          value={value}
-      />
+          onChange={(e) => setValue(e.target.value)}
-      <input className="text-upload" type="submit" value="submit" />
+        />
-    </form>
+        <input type="submit" value="submit" />
+      </form>
+    </pre>
   )
 }
 
 function createUploadUi() {
   const html = <main className='hljs centered fullscreen'>
     <FileForm />
-    <p>or paste your data below</p>
     <PasteForm />
   </main>;